前端实例8——隐藏和显示下拉栏实例（JS，jQuery）

梦里梦外; 2023-03-01 12:22 63阅读 0赞

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70 1]

html

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>下拉栏</title>
        <link rel="stylesheet" href="04下拉栏.css">
    </head>
    <body>
    <div class="left-div">
        <div class="menu">数码类</div>
        <div class="menu-item hide">
            <ul>
                <li><a href="">手机</a></li>
                <li><a href="">电脑</a></li>
                <li><a href="">平板</a></li>
            </ul>
        </div>
        <div class="menu">生活类</div>
        <div class="menu-item hide">
            <ul>
                <li><a href="">水杯</a></li>
                <li><a href="">书本</a></li>
                <li><a href="">窗帘</a></li>
            </ul>
        </div>
        <div class="menu">美妆类</div>
        <div class="menu-item hide">
            <ul>
                <li><a href="">口红</a></li>
                <li><a href="">爽肤水</a></li>
                <li><a href="">发胶</a></li>
            </ul>
        </div>
    </div>
    <script src="../03开关灯实例/jquery-3.5.1.min.js"></script>
    <script src="04下拉框.js"></script>
    </body>
    </html>

css

*{ 
        margin: 0;
        padding: 0;
    }
    a{ 
        text-decoration: none;
    }
    li{ 
        text-decoration: none;
    }
    .left-div{ 
        background-color: brown;
        width: 15%;
    }
    .menu{ 
        color: white;
        text-align: center;
        padding: 10px 0;
        border: 1px solid #eeeeee;
    }
    .menu-item{ 
        background-color: burlywood;
        text-align: center;
    }
    .menu-item li{ 
        border: 1px solid #eeeeee;
        padding: 5px 0;
    }
    .hide{ 
        display: none;
    }
    .menu-item a{ 
        color: black;
    }

var $menuEle = $(".menu");
    $menuEle.click(function () { 
        $(this).siblings(".menu-item").not($(this).next()).addClass("hide");
        $(this).next().toggleClass("hide");
    });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70]: /images/20230208/de711f2e2e2b4f1891762f1413dc13d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDE5MDE2_size_16_color_FFFFFF_t_70 1]: /images/20230208/ba63f758018b42bfb35efb65aaadc682.png