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

回答

相關問題