slideToggle整个div

我正在开发一个页面，内容隐藏在jQuery切换按钮后面。我希望内容包装器在单击时水平和垂直展开（目前包装器只能垂直展开）。slideToggle整个div

我不知道如何组织我的文件。目前，该包装具有以下的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内的内容是截断：即。如果宽度设置，包装将不会展开到适当的水平尺寸。另一方面，如果我删除宽度属性，页面不再被正确包装。我应该如何解决这个问题？

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

来源

2011-11-10 Nick B

我们可以看到一些HTML吗？ – Kyle

您可以使用一些小提琴：http://jsfiddle.net/ – 2011-11-10 09:21:10

感谢您的答复。凯尔，我添加了相关的html。 Sylvio，可悲的是，我一直无法用小提琴找到答案。感谢您的建议 –

不知道我完全理解这个问题，但这里有2个可能的解决方案：
1.使用jQuery的.animate（）方法，而不是的slideToggle，会给你所有你需要的灵活性。
2.如果你的周围布局有问题，将你的包装放在一个固定尺寸的div内，并将你的#wrapper改为位置：绝对

来源

2011-11-10 09:17:39 karnyj

谢谢karnyj。我现在正在使用动画，但在点击时获取宽度时遇到问题。我的包装的宽度是300px，但我希望它可以在点击时扩大到900px。 jquery句柄被设置为面板，这会激活“切换”高度。当面板在按钮单击时展开时，如何让包装宽度展开？非常感谢 –

谢谢animate（）;是答案 –

slideToggle整个div

回答

相关问题