我遇到一个问题，即单击.mini-nav li而不是时，我的jQuery会切换.nav ul li。解决此问题的最佳方法是什么？
HTML：
<div class="nav">
<ul>
<li>
<img src="./assets/icon-down_arrow.png" />LoLNode
<ul class="mini-nav">
<li>Home</li><br />
<li>Popular</li><br />
<li>Create</li><br />
</ul>
</li>
</ul>
</div>
CSS：
.nav {
padding:5px 0;
background: -webkit-linear-gradient(#333, #222);
background: -o-linear-gradient(#333, #222);
background: -moz-linear-gradient(#333, #222);
background: linear-gradient(#333, #222);
}
.nav > ul {
width:1000px;
margin:auto auto;
list-style-type:none;
}
.nav ul > li {
display:inline-block;
padding:10px 5px;
font-size:16px;
color:#FFF;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
.nav ul li > .mini-nav {
min-width:92px;
position:absolute;
top:51px;
list-style-type:none;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
display:none;
}
.nav ul li .mini-nav > li {
display:inline-block;
padding:2px 5px;
background:#222;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
font-size:12px !important;
color:#FFF;
}
jQuery的：
$('.nav ul > li:first-child').on('click', function() {
$('ul.mini-nav').toggle();
});
当您单击inner时li，您需要停止事件传播，以便该事件不会冒泡到处理该事件的外部列表，从而切换内部事件：
$('.nav > ul > li:first-child').on('click', function () {
$('ul.mini-nav').toggle();
});
$('ul.mini-nav').on('click', function (e) {
e.stopPropagation();
});
还要注意我固定了选择器
.nav > ul > li:first-child
^-- here
还有一件事：<br>在之后删除li。您要制作li块，而不是inline-block要在下一行渲染它们。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句