滑动切换整个 div
我正在开发一个页面，其中内容隐藏在 jquery 切换按钮后面。我希望内容包装器在单击时水平和垂直扩展（当前包装器仅垂直扩展）。
我不知道如何组织我的文件。目前，包装器具有以下 css 属性：
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}
“panel”div 通过以下方式控制 javascript：
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
直接在 css 中更改 #wrapper 宽度会导致 slipToggle 内的内容被截断：即。如果设置了宽度，则滑动后包装器不会扩展到适当的水平尺寸。另一方面，如果我删除宽度属性，页面将不再正确换行。我应该如何解决这个问题？
<div id="wrapper" >
<div id="intro" class="content-wrapper"><a href="#" class="btn-slide"><span class="content">CONTENT</span></a>
<div class="wrapper-inner container"><div class="home-page container">
<div id="panel">
I am developing a page where the content is hidden behind a jquery toggle button. I want the content wrapper to expand both horizontally and vertically when clicked (currently the wrapper only expands vertically).
I'm not sure how to organize my files. Currently, the wrapper has these css attributes:
#wrapper {
width: 900px;
margin: 0 auto;
margin-top: 40px;
background-color:#FFF;
border-radius: 42px;
-moz-border-radius:42px;
padding:30px;
-webkit-box-shadow: 0 0 10px #000;
}
The "panel" div controls the javascript via:
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
Changing the #wrapper width directly in the css causes the content inside the slideToggle to be truncated: ie. the wrapper won't expand to the proper horizontal size after sliding if the width is set. On the other hand, if I remove the width attribute, the page is no longer properly wrapped. How should I remedy this problem?
<div id="wrapper" >
<div id="intro" class="content-wrapper"><a href="#" class="btn-slide"><span class="content">CONTENT</span></a>
<div class="wrapper-inner container"><div class="home-page container">
<div id="panel">
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
不确定我完全理解这个问题，但这里有两种可能的解决方案：
1. 使用 jQuery .animate() 方法而不是 slipToggle，这将为您提供所需的所有灵活性。
2.如果您对周围布局有问题，请将包装器放置在固定大小的div内，并将#wrapper更改为position:absolute
Not sure i fully understand the problem, but here are 2 possible solutions:
1. use the jQuery .animate() method instead of slideToggle, that will give you all the flexibility you need.
2. if you are having problems with the surrounding layout, place your wrapper inside a div with a fixed size, and change your #wrapper to position:absolute