jQuery单击未向父级冒泡

单击

div.arrow

时，其类应切换，折叠的内容应展开/折叠。这是可行的，但是

div.arrow

上的单击事件不会冒泡到它的父级

li.level1

。在一个相关的注释中，我如何让兄弟姐妹

span

也包含在这个冒泡中

HTML

JS

---

我认为您可以将代码缩短为：

$('#list > li').click(function () {
    $(this).find('ul.level1a').slideToggle();
    $(this).find('.arrow').toggleClass('arrow-right arrow-down');
});

在此处查看演示

<ul id="list">
    <li class="level1"><div class="arrow arrow-down"></div>Exact Matches
        <ul id="ul_first" class="level1a">
            <li><b>GE</b> Ab Illo Inventore: ASJK: (2365)</li>
            <li><b>GE</b> Doloremque: PEOJ: (92454)</li>
            <li>Eaque <b>GE</b> Ipsa Quae</li>
            <li>Porro Quisquam <b>GE</b> Est</li>
            <li>Sit Voluptatem <b>GE</b></li>
        </ul>
    </li>   
    <li class="level1"><div class="arrow arrow-right"></div>Advisor <span>(7)</span>
        <ul class="level1a">
            <li>Ab Ill<b>ge</b>o Inventore</li>
            <li>A<b>ge</b>usantium</li>
            <li>Aspernatur Aut<b>ge</b></li>
            <li>Beata<b>ge</b>e Vitae Dicta</li>
            <li>Consequuntur<b>ge</b></li>
            <li>Geloremque</li>
            <li>Geque Ipsa Quae</li>
        </ul>
    </li>   

li.level1 .arrow-down, li.level1 .arrow-right {
    width: 0; 
    height: 0; 
    position: absolute;
}

li.level1 .arrow-down {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid #444;
    left: -16px;
    top: 7px;
}

li.level1 .arrow-right {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 7px solid #444;
    left: -12px;
    top: 5px;
}

$('div.arrow').click(function(){
    var arrowRight = $(this).hasClass('arrow-right');  
    var arrowDown = $(this).hasClass('arrow-down');
    console.log("R: "+arrowRight);
    console.log("D: "+arrowDown);

    $(this).parent().children('ul.level1a').slideToggle();

    if (arrowRight) {
        $(this).removeClass('arrow-right').addClass('arrow-down');
    } else if (arrowDown) {
        $(this).removeClass('arrow-down').addClass('arrow-right');
    };  
});

---

使用

$（this）.parent（）.children（'span.sibling'）

选择同级

要将事件冒泡到li，您需要将单击绑定到li而不是div.arrow。我很欣赏代码的缩短。我没法去上班。但是，箭头（或范围）仍然没有触发单击事件。虽然此链接可能会回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会变得无效。

$（this）.parent（）.children（'span.sibling'）

是我添加的唯一一个使给定问题有效的部分，其余部分已在问题中完成。谢谢你的建议。