下拉javascript问题

各位用户好

我似乎在尝试让下拉菜单正常工作时遇到了一些问题，我很确定是我的javascript不能正常工作。从现在开始，当单击

元素打开
菜单并保持活动状态时，使用“我所拥有的”-会起作用，但是，您必须单击
才能关闭它，活动状态保持打开，而不是像我也需要它一样变为非活动状态…所以我手头的问题是我哪里出了问题？我对javascript还是相当陌生的，任何帮助都将不胜感激

要求：

1.）单击“激活”并打开菜单

2.）无论是再次单击元素还是页面上的任何位置，菜单都会关闭并变为非活动状态

这就是我到目前为止所做的：

HTML:

CSS:

您永远不会在第二次单击时删除该类

使用
.hasClass（）
检查它是否处于活动状态，如果是，请使用
.removeClass（）
将其删除

编辑

请求的第二部分，当您单击页面上的任意位置时关闭列表。试试这个：

$(document).ready(function () {
    $('.top_l ul').click(function (e) {
        $('.top_l ul').addClass('active');
        $('.top_l ul li').slideToggle();
    });

    $(document).click(function() {
        $('.top_l ul li').slideUp();
    });

    $('.top_l ul,.top_l li').click(function(e) {
        e.stopPropagation();
    });
});

这是可行的，但是有没有一种方法可以让你点击页面上的任何地方，
ul
也会关闭，而不是字面上的关闭，并且只能点击
li
来关闭它？当然，你可以这样做：
$（文档）
在此处查看有关它的更多信息，例如，如果您单击页面上除
ul
本身以外的任何位置，则要隐藏您的
ul
。如何实现它，我尝试使用
$（'.top_l li'）。单击（函数（e）{e.stopPropagation（）；}）
但这不起作用，把它放在
$（'.top_l ul'）
上，但另一方面，它们的顺序是相反的
li
通常放在
ul
内。
$(document).ready(function () {
    $('.top_l li').click(function () {
        $('.top_l li').addClass('active');
        $('.top_l li ul').slideToggle();
    });
});

.top_l {
    width: 340px;
    height: 60px;
    float: left;
}
.top_l li {
    height: 32px;
    padding: 8px 12px 0 12px;
    margin: 10px 0 0 6px;
    border: 1px solid transparent;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    float: left;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -ms-transition: all .3s ease;
    transition: all .3s ease;
    list-style: none;
    color: #A4A4A4;
    font: 20px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 2px 2px 3px #000;
    position: relative;
    cursor: pointer;
}
.top_l li span {
    font: 14px Arial, Helvetica, sans-serif;
}
.top_l li:hover, .top_l li.active {
    color: #FFF;
    border: 1px solid #444;
}
.top_l li ul {
    width: 120px;
    height: 120px;
    background: #222;
    border: 1px solid #444;
    -moz-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    -webkit-box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    box-shadow: inset 0 0.1em 0.4em 0.1em #000;
    display: none;
    position: absolute;
    top: 22px;
    left: 4px;
}
.top_l li ul a {
    width: 118px;
    height: 28px;
    padding: 10px 0 0 0;
    background: red;
    float: left;
    color: #FFF;
    font: 14px Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-variant: small-caps;
    text-shadow: 1px 1px 1px #000, -2px -2px 2px #000;
}

$('.top_l li').click(function () {
    if($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }
    $('.top_l li ul').slideToggle();
});

$(document).ready(function () {
    $('.top_l ul').click(function (e) {
        $('.top_l ul').addClass('active');
        $('.top_l ul li').slideToggle();
    });

    $(document).click(function() {
        $('.top_l ul li').slideUp();
    });

    $('.top_l ul,.top_l li').click(function(e) {
        e.stopPropagation();
    });
});