Question

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

＆＃34;面板＆＃34; 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">

Answer 1

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

slide切换整个div

1 个答案: