jQuery 导航菜单不更新第一个元素

Question

我正在尝试构建一个具有3个选项的自定义导航菜单。最初，只有活动选项可见。单击活动选项将显示其他选项，单击另一个选项后，它将在菜单的开头进行预处理，其他列表项将再次隐藏。

// html
<ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
</ul>
// css
li {
    display: block;
}
li:not(:first-child) {
    display: none;
}
// js
$(function(){
    $('li:first-child').on('click', function(){
        $(this).siblings().toggle()
    });
    $('li').not(':first-child').on('click', function(){
        $(this).prependTo('ul')
        $(this).siblings().hide()
    });
});

http://jsfiddle.net/H85Yj/

然而，唯一的问题是，在它执行一次之后，它就不会再运行了。我猜li:first-child仍然是第一个选项。我能解决这个问题吗？

Answer 1

（据我所见，在prependTo()的API中没有记录）您似乎遇到的问题是，一旦从HTML中移动li元素，事件绑定就不会与一起传输；因此点击CCD_ 4不再触发事件。最简单的方法是将事件绑定到父ul元素，并在那里处理事件（因为click事件在DOM中冒泡并由祖先执行）。

因此，我建议：

$('ul').on('click', 'li', function(){
    var self = $(this),
        siblings = self.siblings();
    if (siblings.filter(':visible').length) {
        self.prependTo(self.parent());
        siblings.hide();
    }
    else {
        siblings.toggle();
    }
});

JS Fiddle演示。

尽管经过思考，以下内容似乎更简单：

$('ul').on('click', 'li', function(){
    var _self = $(this);
    if (_self.is(':first-child')) {
        _self.siblings().toggle();
    }
    else {
        _self.prependTo(_self.parent()).siblings().hide();
    }
});

JS Fiddle演示。

请注意，我也对CSS进行了一些调整（使用简单的CSS而不是SCSS）；设置display: none作为li元素的默认规则，设置display: block作为li:first-child元素（与您最初使用的不必要的复杂:not(:first-child)规则相反）。

参考文献：

• :first-child选择器
• :visible选择器
• filter()
• is
• CCD_ 16
• parent()
• CCD_ 18
• siblings()