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

How do I make a drop down menu close as another from the same class opens in jquery / javascript?

本文关键字：下拉菜单 jquery 另一个 javascript 一类 何使 因为      更新时间：2023-09-26

我创建了一个下拉菜单，其中包含要单击的链接，使用户能够删除消息，阻止帖子的评论等。

无论如何，一切都按预期工作。但是，我想停止一些行为。如果用户单击箭头以显示下拉菜单，则会显示哪个很好，但是当用户滚动到另一条消息/帖子并再次单击箭头时，两个下拉菜单都将保持打开状态。

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

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

这是我当前的代码：

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：

.micropostOptions {
    position:absolute;
    height:17px;
    width:17px  ;
    top:5px;
    right:5px;
    background:white url("/assets/arrow_down_alt1.png") no-repeat;
    background-position:0px 0px;
        &:hover {
            background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
            background-position:0px 0px;
            cursor:pointer !important;
        }
}
.postMenuActivate {
    display:block;
}
.postMenuHoverState {
    background: url("/assets/arrow_down_alt1_hover.png") no-repeat; 
    background-position:0px 0px;
    cursor:pointer !important;
}
.postMenu {
    position:absolute;
    display:none;
    padding-bottom:20px;
    background-color:white !important;
    border:1px solid $main-background-color;
    height:163px;
    width:170px;
    top:18px;
    right:2px;
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
    color:gray;
    z-index:3000;
        li {
        font-size:12px;
        height:33px;
        background-color:white !important;
            a span {
                float:left;
                width:160px;
                height:33px;
                line-height:33px;
                padding-left:10px;
                color:gray;
                  &:hover {
                    background-color:#4D90FE !important;
                    color:white;
                    //  #DD4B39,#D14836
                    }
            }
            &:hover {
            background-color:#4D90FE;
            color:white;
            }
        }
        .deletePost {
            //position:relative;
            padding-top:0px !important;
            padding-left:0px !important;
            height:39px;
            width:170px;
            text-align:center;
            padding-bottom:7px;
            border-bottom:1px solid #d9d9d9;
                a {
                    span {
                    float:left;
                    padding-left:0px !important;                            
                        height:46px !important;
                        width:170px !important;
                        line-height:46px;
                    }
                }
                a span:hover {
                    background-color:#DD4B39 !important;
                    color:white;
                //  #DD4B39,#D14836
                }
        }
        .reportAbuse {
            border-top:1px solid #d9d9d9;
                a span:hover {
                    background-color:gray !important;;
                }
        }
}

.HTML：

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

亲切问候

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

js小提琴演示 

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

在这里拍摄有点盲目，因为我们只有一个看起来像菜单的东西，但这能解决问题吗？

$(".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
        };
});

我认为，你应该看看jQuery的blur（）事件处理程序，以便在元素失去焦点时触发事件：http://api.jquery.com/blur/

相关文章：