Javascript 如何让我的代码在用户单击时关闭下拉菜单；类别“；而它'；已经开门了吗？

单击“类别”打开菜单。现在，如果您再次单击“类别”，预期结果将是菜单关闭。相反，它会关闭，但很快会再次打开！我在代码中找不到导致此错误的原因。请帮忙

我认为在ActiveListItem（ActiveListItem=“Category”，除非选择了其他项）上使用“slideToggle”是正确的代码，但它不起作用

HTML

jQuery

var container = $('.navbar');
$(document).on('click', '.ActiveListItem', function(event) {
    $('.navbar li ul').slideToggle(300);
    $('.navbar > li:first-child > span').text("Category");
});

$(document).on('click', '.navbar ul span', function(event) {   
    $("#input1").focus();
    $('.navbar li ul').slideUp(300);
    $('.navbar > li:first-child > span').text($(this).text());
});

$(document).mouseup(function (e) {
    if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.navbar li ul').slideUp(300);
    }
}); 

只需在toogle事件之前添加

stop（）

：

$(document).on('click', '.ActiveListItem', function(event) {
    $('.navbar li ul').stop().slideToggle(300);
    $('.navbar > li:first-child > span').text("Category");
});

---

请发现更新非常完美。非常感谢。看来我有一些新东西要学乐于助人：）

var container = $('.navbar');
$(document).on('click', '.ActiveListItem', function(event) {
    $('.navbar li ul').slideToggle(300);
    $('.navbar > li:first-child > span').text("Category");
});

$(document).on('click', '.navbar ul span', function(event) {   
    $("#input1").focus();
    $('.navbar li ul').slideUp(300);
    $('.navbar > li:first-child > span').text($(this).text());
});

$(document).mouseup(function (e) {
    if (!container.is(e.target) // if the target of the click isn't the container...
    && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        $('.navbar li ul').slideUp(300);
    }
}); 

$(document).on('click', '.ActiveListItem', function(event) {
    $('.navbar li ul').stop().slideToggle(300);
    $('.navbar > li:first-child > span').text("Category");
});