Javascript 调试以下代码

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

html:

试试这个

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

---

当你点击一个链接时，会显示被点击链接的下一个同级标签。

你的Jquery在哪里？所以这不是一个适合你的网站的代码。向我们展示您的尝试。JQuery与HTML位于同一代码框中。CSS也是如此。您必须向下滚动才能看到它。下面@user4851193提供的解决方案有效。您的菜单会有点跳跃，因为当您从ul上取下子菜单时，它会显示块。如果在css中添加“ul#nav ul{position:absolute；}”，那么应该可以阻止这种情况的发生。（如果您有三级菜单将三级ul设置回位置：静态，则可能需要调整该值）。是的，它可以工作。谢谢你的回复，效果很好。单击“购买”菜单时，会出现下拉菜单，但单击“销售”菜单时，下拉菜单不会自动关闭。所以也请在这方面帮助我，如果您的意思是一次只能显示一个子菜单，那么您应该在显示单击的菜单之前从所有子菜单中删除子菜单类

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

    @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;

    }

}

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