在jquery/javascript中打开同一个类的另一个下拉菜单时，如何关闭下拉菜单？

我已经创建了一个下拉菜单，其中包含可以点击的链接，使用户可以删除邮件、阻止评论等

不管怎么说，一切都如预期的那样运作。不过，我想停止一些行为。如果用户单击箭头以显示下拉菜单，它将显示哪一个是正确的，但是当用户滚动到另一条消息/帖子并再次单击箭头时，两个下拉菜单都保持打开状态

我想让当前菜单在另一个菜单打开时关闭。因此一次只能打开一个菜单

由于某种原因，当我在页面刷新后第一次单击箭头下拉菜单时，箭头悬停状态在我滚动它时闪烁一次。有没有办法阻止这一切

这是我目前的代码：

Jquery：

$(".micropostOptions").click(function(e) {

    var $micropostOptions = $(this),
        $postMenu = $micropostOptions.children();

    e.stopPropagation();

        if ($postMenu.hasClass("postMenuActivate")) {
            $postMenu.hide().removeClass("postMenuActivate");
            $micropostOptions.removeClass("postMenuHoverState");
        } else {
            $postMenu.show(10).addClass("postMenuActivate");
            $micropostOptions.addClass('postMenuHoverState');
        };

});

sCSS：

HTML:

:delete，：confirm=>“确定吗？”，：title=>m.content，：class=>“message\u delete”%>

---

我认为，您应该看看jQuery的blur（）事件处理程序，以便在元素失去焦点时触发事件：

---

这里拍摄有点盲目，因为我们只有一个菜单，但这能解决问题吗

$(".micropostOptions").click(function(e) {

    var $micropostOptions = $(this),
        $postMenu = $micropostOptions.children();

    e.stopPropagation();

        if ($postMenu.hasClass("postMenuActivate")) {
            $postMenu.hide().removeClass("postMenuActivate");
            $micropostOptions.removeClass("postMenuHoverState");
        } else {
            $postMenu.show(10).addClass("postMenuActivate");
            $micropostOptions.addClass('postMenuHoverState');
            $(".micropostOptions.postMenuHoverState")  //selects all micropostOptions with the postMenuHoverState class
                .not($micropostOptions)  //removes the current micropostOptions from the selected set
                .removeClass('postMenuHoverState')  //removes the postMenuHoverState class from all micropostOptions (besides teh current one)
                .children()  //gets the child menus of the set
                    .removeClass('postMenuActivate');  //removes postMenuActivate class from children of the active (but not current) micropostOptions

        };

});

---

我无法在演示中复制您的代码，因此我更改了CSS：

---

如果没有HTML，我们可以用CSS做什么？一个JSFIDLE真的很好！很抱歉。现在添加了HTML。添加了一个演示。复制jQuery并让我知道结果。这个问题与模糊无关。如果单击已关闭的项目，OP希望隐藏“已打开”的项目。（如果我理解的很好…）对，blur（）可能是潜在解决方案的一部分。但由于我们没有进一步的信息，这只是一个猜测。这是有效的，但鉴于我讨厌幻灯片效果，我改用了隐藏和显示。非常有趣的是，这一小部分代码是如何完成我的代码所做的事情的。显示了在jquery方面我需要学习多少。我该怎么做才能在我舔页面上的任何地方时菜单也关闭？@LondonGuy-Hehe，谢谢。是啊，总有东西要学的要隐藏可见的代码，您必须停止单击传播并添加几行代码，如：Happy coding！：）关于“少量代码”和“学习”：D以及“幻灯片”效果与隐藏/显示的对比，我认为从用户体验的角度来看，幻灯片/淡入淡出效果更合适，允许用户在逻辑上遵循（理解）页面上的操作/更改。

    <nav class="micropostOptions">
     <ul class="postMenu">
       <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete" %>
       </li>
       <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
       <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
       <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
       <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
     </ul>  
   </nav>

$(".micropostOptions").click(function(e) {

    var $micropostOptions = $(this),
        $postMenu = $micropostOptions.children();

    e.stopPropagation();

        if ($postMenu.hasClass("postMenuActivate")) {
            $postMenu.hide().removeClass("postMenuActivate");
            $micropostOptions.removeClass("postMenuHoverState");
        } else {
            $postMenu.show(10).addClass("postMenuActivate");
            $micropostOptions.addClass('postMenuHoverState');
            $(".micropostOptions.postMenuHoverState")  //selects all micropostOptions with the postMenuHoverState class
                .not($micropostOptions)  //removes the current micropostOptions from the selected set
                .removeClass('postMenuHoverState')  //removes the postMenuHoverState class from all micropostOptions (besides teh current one)
                .children()  //gets the child menus of the set
                    .removeClass('postMenuActivate');  //removes postMenuActivate class from children of the active (but not current) micropostOptions

        };

});

$('.micropostOptions').on('click',function(){
    var postMenu = $(this).find('.postMenu');
    
    if( postMenu.is(':hidden') ){
        $('.postMenu').slideUp();
        postMenu.slideDown();
    }else{
        postMenu.slideUp() ;
    }
});