我制作了一個導航欄，其中子導航在懸停時全屏顯示，而其他子導航關閉。全屏子導航始終保持打開狀態，直到您轉到新頁面。
我想建立一個關閉按鈕，這樣你也可以通過點擊它來關閉子導航（懸停時不會自動關閉！），這部分起作用，因為它確實淡出但它會立即再次淡入。
我認為問題在于關閉按鈕位于觸發子導航淡入的懸停 div 中。有沒有辦法用javascript推翻它？
$('li.menu-item-has-children').hover(function () {
$('ul.dropdown-menu-main', this).fadeIn('slow');
$(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut();
});
$('.close').click(function () {
$('ul.dropdown-menu-main').fadeOut('fast');
});* {
padding:0;
margin:0;
}
ul, ul li {
list-style:none;
padding:0;
margin:0;
}
li {
display: inline-block;
position: relative;
margin-right:20px !important;
}
ul.dropdown-menu-main {
display:none;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100vh;
background:black;
z-index:-1;
padding:30px 0;
}
ul.dropdown-menu-main li {
color:white;
}
.close {
position:absolute;
top:70px;
left:0px;
z-index:99;
color:#aaaaaa;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 2</li>
</ul>
</li>
</ul>uj5u.com熱心網友回復：
不要針對整體<li>，只針對<a>內部。
但是，請記住，抽屜或選單必須始終比打開更容易關閉。從用戶體驗的角度來看，擁有一個在懸停時很容易打開但需要點擊才能消失的整頁疊加層是令人惱火的，而且是不可行的。
$('li.menu-item-has-children a').hover(function() {
const $this = $(this);
$this.next(".dropdown-menu-main").fadeIn('slow')
$this.parent().siblings()
.find('ul.dropdown-menu-main')
.fadeOut();
});
$('.close').click(function(e) {
$('ul.dropdown-menu-main').fadeOut('slow');
});* {
padding: 0;
margin: 0;
}
ul,
ul li {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
margin-right: 20px !important;
}
ul.dropdown-menu-main {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100vh;
background: black;
z-index: -1;
padding: 30px 0;
}
ul.dropdown-menu-main li {
color: white;
}
.close {
position: absolute;
top: 70px;
left: 0px;
z-index: 99;
color: #aaaaaa;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="menu-item-has-children">
<a href="#">Main 1</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 1</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#">Main 2</a>
<ul class="dropdown-menu-main">
<div class="close">
close
</div>
<li>Sub 2</li>
</ul>
</li>
</ul>uj5u.com熱心網友回復：
這不起作用的原因是因為“關閉”導致懸停事件在父級上觸發。
如果你把它從li里面移除它就會開始作業
看到這個小提琴https://jsfiddle.net/oe6yL0gt/
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/357534.html
標籤：javascript 查询 css