jQuery之菜单展开、收缩实例is()、.visible()的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        body {
            font: 16px "Microsoft YaHei",sans-serif;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            position: relative;
        }
        a {
            text-decoration: none;
        }
        .nav-list {
            width: 220px;
            border: 1px solid #ccc;
        }
        .nav-list h3 {
            margin: 0;
            padding: 10px 20px;
            font-size: 16px;
            /* line-height: 20px; */
            font-weight: normal;
            color: #fff;
            background-color: #333;
            border-bottom: 1px solid #ccc;
            cursor: pointer;
            position:relative;
        }
        .nav-list li {
            border-bottom: 1px solid #ccc;
        }
        .nav-list li a {
            display: block;
            padding: 10px 20px;
            background-color: #f5f5f5;
            color: #333;
            font-size: 14px;
        }
        .nav-list li a:hover{
            background-color: #ccc;
            
        }
        .nav-list ul{
            display: none;
        }
        .nav-list h3 span{
            position: absolute;
            width: 20px;
            height: 20px;
            background: url("./img/arrow_left.png") center center;
            background-size: 100% 100%;
            right: 20px;

        }
        .nav-list h3:hover{
            background-color: #222;
        }
        .nav-list h3.open span{
            background: url("./img/arrow_down.png") center center;
            background-size: 100% 100%;
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div class="nav-list">
        <h3>弹性计算<span></span></h3>
        <ul>
            <li><a href="#">云服务器ECS</a></li>
            <li><a href="#">轻量应用服务器</a></li>
            <li><a href="#">虚拟主机</a></li>
        </ul>
        <h3>数据库<span></span></h3>
        <ul>
            <li><a href="#">MySQL</a></li>
            <li><a href="#">SQL Server</a></li>
            <li><a href="#">Redis</a></li>
        </ul>
        <h3>域名与网站<span></span></h3>
        <ul>
            <li><a href="#">域名注册</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">云虚拟主机</a></li>
        </ul>
        <h3>网络与存储<span></span></h3>
        <ul>
            <li><a href="#">对象存储</a></li>
            <li><a href="#">oss</a></li>
            <li><a href="#">弹性公网IP</a></li>
        </ul>
    </div>

    <script src="../jqueryFile/jquery-3.4.1.js"></script>
    <script>
        $(function(){

            $(".nav-list h3").click(function (){

                //-----------------------------------------------
                // $(this).toggleClass("open");



                // 实现原理如下
                // if ( $(this).hasClass("open") ){
                //     $(this).removeClass("open");
                // }else{
                //     $(this).addClass("open");
                // }




                // -----------------------------------------------
                // 判断ul是隐藏还是显示的状态
                // $(this).next("ul").slideToggle();



                //实现原理如下:


                // if( $(this).next("ul").is(":visible")){
                //     $(this).next("ul").slideUp();
                // }else{
                //     $(this).next("ul").slideDown();
                // }


                // 最终简写的代码
                $(this).toggleClass("open").next("ul").slideToggle();

                
            })


        })
    </script>
</body>
</html>

http://hao.qiangssvip.com/jQueryStudy/菜单展开收缩.html

Last modification:July 6th, 2019 at 09:52 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment