Question

我有两个带有jQuery下拉菜单的div。当我单击文档上的任何位置时，活动菜单会向上滑动，但是当我使用jQuery下拉菜单单击另一个div时，之前打开的菜单仍保持打开状态。

HTML（示例）

<div id="menu-act" class="menu-button">
<ul class="no-js">
    <li>
    <a id="btnclick" class="actions">Actions</a>
    <ul class="action-options">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        </ul>
    </li>
</ul>
</div>
<div id="menu-act2" class="menu-button">
<ul class="no-js">
    <li>
    <a id="btnclick2" class="actions">Actions</a>
    <ul class="action-options">
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        </ul>
    </li>
</ul>
</div>

JQuery（示例）

$(function() {
        $("#menu-act > ul").toggleClass("no-js js");
        $("#menu-act .js ul").hide();
        $("#menu-act .js").click(function(e) {
            $("#menu-act .js ul").slideToggle(100);
            $("#btnclick").toggleClass("active");
            e.stopPropagation();
        });
    $("#menu-act2 > ul").toggleClass("no-js js");
        $("#menu-act2 .js ul").hide();
        $("#menu-act2 .js").click(function(e) {
            $("#menu-act2 .js ul").slideToggle(100);
            $("#btnclick2").toggleClass("active");
            e.stopPropagation();
        });
        $(document).click(function() {
        if ($('.menu-button .js ul').is(':visible')) {
            $('.menu-button .js ul', this).slideUp(10);
            $('.actions').removeClass('active');
        }
    });

});

演示：http://jsfiddle.net/56ycx/1/

当我点击另一个下拉菜单时，如何隐藏任何以前打开的菜单？

Answer 1

像这样......

$('.DropDownMenu li').click(function() {
    var $that = $(this);

    // Slides Up, all menu items, and removes class active on Complete.
    $('.DropDown .MenuItem li').slideUp(10, function(){
         $that.removeClass('active');
    });

    // Slides Down, clicked menu item, and adds class "active" on Complete.
    $that.slideDown(10, function(){
         $that.addClass('active');
    });
});

Answer 2

<强> DEMO

我认为它很简单，因为它是

试试这个

$(function () {
    $(".menu-button .action-options").hide();
    $(".menu-button ul a").click(function (e) {
      $(".menu-button .action-options").hide();
     $(this).parents('ul').find('.action-options').toggle();
        e.stopPropagation();
    });

    $(document).click(function (e) {

        $(".menu-button .action-options").hide();
        return true;
    });
});

根据OP要求编辑的代码

DEMO

根据提到的要求，尝试这个新代码。

$('.menu-button .action-options').hide();
$('.menu-button .actions').click(function (e) {
    if ($(this).parents('ul').find('.action-options').is(':visible')) {

        $(this).parents('ul').find('.action-options').slideUp(10);
        $('.actions').removeClass('active');
    } else {
        $('.menu-button .action-options').slideUp(10);
        $(this).parents('ul').find('.action-options').slideDown(10);
        $('.actions').addClass('active');
    }
    e.stopPropagation();
});
$(document).click(function (e) {

    $(".menu-button .action-options").hide();
    return true;
});

希望这有帮助，谢谢

jQuery下拉菜单.slideUp（）无效

2 个答案:

根据OP要求编辑的代码

DEMO