Question

我想制作多级响应式下拉菜单。问题是，点击“购买”，“销售”和“新建”菜单时，下拉菜单会出现，但再次点击则会保持打开状态。我想在点击时显示/隐藏它，就像#handle一样。这意味着当我点击购买菜单时，相应的下拉列表应该出现，再次点击它必须显示出来。销售和新菜单的要求相同。代码在下面，

HTML：

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="nav.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <div class="container">
        <nav class="showing">
         <div id="handle">Menu</div>
            <ul id="nav">
                <li><a href="#">Available Stock</a></li>
                <li>
                    <a href="#">Purchase</a>
                        <ul class="sub-menu">
                            <li class="sub-list"><a href="#">Purchase Return</a></li>
                        </ul>
                <li>
                    <a href="#">Sale</a>
                        <ul class="sub-menu">
                            <li class="sub-list"><a href="#">Sale Return</a></li>
                        </ul>
                </li>
                <li><a href="#">Cash Recieve</a></li>
                <li><a href="#">Cash Payment</a></li>
                <li><a href="#">Cash Recieve</a></li>
                <li>
                    <a href="#">New</a>
                         <ul class="sub-menu">
                            <li class="sub-list"><a href="#">New Customer</a></li>
                            <li class="sub-list"><a href="#">New Supplier</a></li>
                            <li class="sub-list"><a href="#">New Town</a></li>
                            <li class="sub-list"><a href="#">New Product</a></li>
                        </ul>
                </li>
                <li><a href="#">Opening Stock</a></li>
                <li><a href="#">Gate Pass</a></li>
                <li><a href="#">Sale History</a></li>
            </ul>
        </nav>
    </div>

的javascript：

<script>
    $('#handle').on('click', function() {
        $('ul').toggleClass('showing');
        });
    $('ul#nav li').on('click', function() {
        $('.sub-menu').toggleClass('sub-menu');
        });
</script>

的CSS：

    @charset "utf-8";
/* CSS Document */
body {
    margin:0;
    padding:0;
}
.clear {
    clear:both;
}
ul {
    list-style-type:none;
    margin:0;
    padding:0;
    -moz-transition:max-height 0.4s;
}
ul#nav li {
    background:#fff;
    float:left;
}
ul#nav li a {
    color:black;
    display:block;
    background:#fff;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid green;
}
ul#nav li a:hover {
    background:#000;
    color:white;
}
ul#nav li .sub-list {
    float:none; 
}
.sub-menu {
    display:none;
}
ul#nav li:hover .sub-menu {
    display:block;
    position:absolute;
}
#handle {
    display:none;
}

@media screen and (max-width:480px) {


    ul#nav li {
        width:100%;
        text-align:center;
    }
    ul {
        max-height:0;
        overflow:hidden;
    }
    .showing {
        max-height:50em;
    }
    ul#nav li .sub-menu {
        max-height:0;   
    }
    .sub-menu {
        max-height:2em; 
    }
    #handle {
        display:block;
        background:#093;
        color:#fff;
        padding:10px;
        text-align:center;
        font-weight:bold;
        cursor:pointer;

    }

}

Answer 1

试试这个

$('ul#nav a').on('click',function(e){
    $(this).next('ul').toggleClass('sub-menu');
 });

当您点击链接时，会显示下一个兄弟单击链接的ul标记。

调试以下代码

1 个答案: