Question

我遇到的问题是，我在点击.mini-nav li而非.nav ul li时，我的jQuery会切换。解决这个问题的最佳方法是什么？

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

Answer 1

当您单击内部li时，您需要停止事件传播，以便该事件不会冒泡到处理它的外部列表，切换内部事件：

$('.nav > ul > li:first-child').on('click', function () {
    $('ul.mini-nav').toggle();
});

$('ul.mini-nav').on('click', function (e) {
    e.stopPropagation();
});

演示：http://jsfiddle.net/8op8qt8w/

还要注意我修改选择器

.nav > ul > li:first-child
     ^-- here

还有一件事：在<br>之后删除li。如果您希望在下一行渲染它们，则需要li阻止而不是inline-block。

jQuery .toggle（）子问题

1 个答案:

演示：http://jsfiddle.net/8op8qt8w/