javascript - 垂直导航兄弟在打开另一个时不关闭

Question

我的垂直导航有效，除了当我按下同级下拉菜单时，之前打开的下拉菜单不会折叠。我想知道你是否可以帮我解决这个问题。

这是我的 javascript 代码，如果您想完整查看，这里是 jsfiddle 链接：http: //jsfiddle.net/CLNBn/2/

$('.vertical-nav ul li:has("div")').find('div').hide();

$('.vertical-nav li:has("div")').find('span:first').click(function() {
    $(this).parent('li').find('span:first').toggleClass("closed opened");
    if ($(this).parent('li').find('span:first').attr('class') == 'closed') {
        $(this).parent('li').find('span:first').text('+');
    } else {
        $(this).parent('li').find('span:first').text('-');
    }
    $(this).parent('li').find('div:first').slideToggle();
});

Answer 1

由于您已经为元素提供了合理的类，因此这项任务非常简单。您想要的是找到所有span具有类的元素，它们opened是当前元素的兄弟姐妹的子li元素，并触发它们的click事件处理程序。

这可以通过以下方式完成：

$(this).closest('li').siblings().children('span.opened').click();

演示

我还冒昧地将您的代码简化为：

$('.vertical-nav li:has("div")').find('span:first').click(function() {
    var $this = $(this);
    $this.toggleClass("closed opened");
    if ($this.hasClass('closed')) {
        $this.text('+');
    } else {
        $this.text('-');
        $this.closest('li').siblings().children('span.opened').click();
    }
    $this.closest('li').find('div').first().slideToggle();
});​

正如我在评论中所说，this已经引用了span元素，无需遍历 DOM 树并再次搜索它。