简单的手风琴JS效果实现

最新推荐文章于 2024-07-19 08:43:05 发布

蜗牛夏

最新推荐文章于 2024-07-19 08:43:05 发布

阅读量7.7k

点赞数 10

分类专栏：前端文章标签：前端 javascript html

本文链接：https://blog.csdn.net/yl_cc/article/details/72452670

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为一名后端开发程序猿，为了能够更好的做好后端开发，很多时候需要去了解前端的东西，比如JS。所谓技多不压身，所以就在闲暇之余学习学习前端，今天就顺便给我们的UI找了一个效果，特此分享出来，做个分享，也为自己这业余前端做个备忘。下面介绍简单的手风琴效果实现过程，直接上代码：

html代码 demo.html（没有写样式，只实现效果，样式就交给前台页面设计吧）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>手风琴Demo</title>
    </head>
    <body>
        <div >
            <ul class="leftli">
                <li>First</li>
                    <ul>
                        <li>First One</li>
                        <li>First Two</li>
                    </ul>

                <li>two</li>
                    <ul>
                        <li>two One</li>
                        <li>two Two</li>
                    </ul>

                <li>three</li>
                    <ul>
                        <li>three One</li>
                        <li>three Two</li>
                    </ul>


                <li>four</li>
                    <ul>
                        <li>four One</li>
                        <li>four Two</li>
                    </ul>

            </ul>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</html>

JS代码 demo.js（需引入JQuery的包）：

$(function() {
    //设置DIV的高度跟随屏幕变化而变化，类似于自适应
    $(".leftli").height(document.body.scrollHeight);
    //隐藏leftli下所有ul元素
    $(".leftli ul").hide();

    //bind()为.leftli li的li生成点击事件
    $(".leftli li").bind("click", function() {
        /**
        .netx("ul")获取同级的下一个ul元素
        slideToggle(300)展开/关闭当前被点击的ul元素，300为速度，除了可以是数字还可以"slow"、"normal"、"fast"
        siblings("ul")遍历所有的ul元素
        **/
        $(this).next("ul").slideToggle(300).siblings("ul").slideUp(300);
    })

})