[英]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.