jq点击显示隐藏下拉菜单

原创于 2018-08-12 16:51:59 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

jq 专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何使用jQuery实现导航菜单中点击列表项时显示或隐藏子级下拉菜单的功能。通过CSS隐藏初始下拉菜单，然后用jQuery监听点击事件，动态改变子菜单的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle</title>
    <script src="js/jquery-3.1.0.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .nav1>li>ul{
            display: none}
        .nav1>li{color: red}
        .nav1>li>ul>li{color: black!important;}
    </style>
</head>
<body>
<ul class="nav1">
    <li>aaaaa
        <ul>
            <li>aa22</li>
            <li>aa22</li>
            <li>aa22</li>
            <li>aa22</li>
        </ul>
    </li>
    <li>bbbbb
        <ul>
            <li>bb22</li>
            <li>bb22</li>
            <li>bb22</li>
            <li>bb22</li>
        </ul>
    </li>
    <li>cccc
        <ul>
            <li>cc22</li>
            <li>cc22</li>
            <li>cc22</li>
            <li>cc22</li>
        </ul>
    </li>
    <li>dddddd
        <ul>
            <li>ddd22</li>
            <li>dd22</li>
            <li>dd22</li>
            <li>dd22</li>
        </ul>
    </li>
    <li>eee
        <ul>
            <li>ee22</li>
            <li>ee22</li>
            <li>ee22</li>
            <li>ee22</li>
        </ul>
    </li>
</ul>
<script>
    $(function () {
        var $ali=$(".nav1 li")
        for(var i=0;i<$ali.length;i++){
            $ali.eq(i).click(function () {
                if($(this).find("ul").is(':hidden')){
                    $(this).find("ul").show()
                }else{
                    $(this).find("ul").hide()
                }
            })
        }
    })
</script>
</body>
</html>