[英]How do I make a drop down menu close as another from the same class opens in jquery / javascript?
我创建了一个带有链接的下拉菜单,单击该链接使用户能够删除消息、阻止对帖子发表评论等。
无论如何,一切都按预期进行。但是我想停止某些行为。 如果用户单击箭头以显示下拉菜单,它会显示哪个很好,但是当用户滚动到另一条消息/帖子并再次单击箭头时,两个下拉菜单都保持打开状态。
我想在打开另一个菜单时关闭当前菜单。 因此一次只能打开 1 个菜单。
出于某种原因,当我在页面刷新后第一次单击箭头下拉菜单时,箭头 hover state 在我滚动它时闪烁一次。 无论如何要阻止这个?
这是我当前的代码:
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');
};
});
CSS:
.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:
$('.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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.