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

DEMO

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

$('.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树并再次搜索它。

垂直导航兄弟姐妹在打开另一个兄弟姐妹时没有关闭

1 个答案: