滑动切换整个 div答案

【问题标题】：slideToggle the whole div滑动切换整个 div
【发布时间】：2011-11-10 09:10:51
【问题描述】：

我正在开发一个页面，其中内容隐藏在 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;
}

“面板”div 通过以下方式控制 javascript：

<script type="text/javascript">
    $(document).ready(function(){

$(".btn-slide").click(function(){
    $("#panel").slideToggle("slow");
    $(this).toggleClass("active"); return false;
}); 
    });
</script>

直接在css中更改#wrapper宽度会导致slideToggle内的内容被截断：即。如果设置了宽度，则包装器在滑动后不会扩展到适当的水平尺寸。另一方面，如果我删除 width 属性，页面将不再正确包装。我应该如何解决这个问题？

<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">

【问题讨论】：

你能用一些小提琴吗：jsfiddle.net
感谢您的回复。凯尔，我添加了相关的 html。西尔维奥，遗憾的是，我无法用小提琴找到答案。感谢您的建议

标签： javascript css slidetoggle

【解决方案1】：

不确定我是否完全理解问题，但这里有 2 个可能的解决方案：
1. 使用 jQuery .animate() 方法而不是 slideToggle，这将为您提供所需的所有灵活性。
2.如果周围布局有问题，请将包装器放在固定大小的 div 中，并将#wrapper 更改为 position:absolute

【讨论】：

谢谢卡尼。我现在正在使用动画，但在点击时无法扩大宽度。我的包装器的宽度是 300 像素，但我希望它在点击时扩展到 900 像素。 jquery 句柄设置为面板，它动画以“切换”高度。当面板在按钮单击时展开时，如何使包装器宽度展开？非常感谢
感谢 animate();是答案