jQuery .toggle() child issue

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

还有一件事：在li之后删除<br>。如果希望在下一行中渲染li块而不是inline-block块，则需要将其设置为块。