如何实现CSS+JS一个DIV层的展开折叠效果

html-css016

如何实现CSS+JS一个DIV层的展开折叠效果,第1张

可以改变 "div" 元素的高度(jQuery的animate方法)：

$(".btn1").click(function(){

  $("#box").animate({height:"300px"})

})

也可以设置溢出隐藏：

<div style="min-height:10pxoverflow:hidden">

    <div style="margin-top:-800px">content more..</div>

</div>

第二种方式也需要js动态改变div style里面的margin-top。

知道你要啥样的，就说个最简单的竖列折叠菜单吧,比如：

菜单1

子菜单1

子菜单2

……

菜单2

子菜单1

子菜单2

……

如果要做这样的折叠菜单 那html为：

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

<div class="menu">

    <div>菜单1</div>

    <ul>

        <li>子菜单1</li>

        <li>子菜单2</li>

        ……

    </ul>

</div>

css为：(没样式只有功能，样式自己去加)

.menu ul{ display:none}

js为：

$('.menu').click(function(){

    $(this).find('ul').slideToggle()

)}