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()}问题中遇到的（未经证明的）问题是，一旦您从HTML中移动li元素，事件就会发生 - 绑定不会与一起传输;因此，单击li不再触发事件。最简单的方法是将事件绑定到父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 demo

虽然经过反思，以下似乎更简单：

$('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 demo

请注意，我也调整了一点CSS（使用简单的CSS而不是SCSS）;将display: none设置为li元素的默认规则，将display: block设置为li:first-child元素（而不是您使用的不必要复杂:not(:first-child)规则原本）。

参考文献：

jQuery nav菜单不会更新第一个元素

1 个答案: