Question

我有以下列表元素。

<div id="selections">
<ul>
    <li><img class="closeArrow">Company 1
        <ul class="collapse">
            <li><img class="closeArrow">Branch 1-1
                <ul class="collapse">
                    <li>User 1-1-1</li>
                    <li>User 1-1-2</li>
                    <li>User 1-1-3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
</div>

我添加了以下事件处理程序如果我点击＆＃34;分支1-1和＃34;我希望第二级有红色边框。

$(document).on('click', '#selections ul > li:has(img)',function(e){
        $(this).css("border","red thin solid");
}

目前第二级和第一级已更改为红色边框。

Result after click

好像＆＃39;这个＆＃39;适用于父ul中的所有元素，而不仅仅是被点击的子ul。

想法是切换所有子元素的显示。因此，如果用户单击分支1-1，则用户1-1-x必须切换显示。如果用户单击公司1，则分支1-1及其子元素必须切换显示。单击的选项必须保持可见，以便用户可以再次对其进行clikc。

有什么建议吗？

Answer 1

您需要停止事件传播：

[e.stopPropagation();][1]

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

最佳解决方案是基于类而不是使用内联样式。

因此，如果您需要切换，则可以使用toggleClass()代替css()。这意味着您需要定义一个类而不是使用内联类字符串。这样可以避免将红色等属性转换为等效的rgb值的复杂性。

摘录：

＆＃13;

$(document).on('click', '#selections ul > li:has(img)',function(e) {
    e.stopPropagation();
    $(this).toggleClass('newBorder');
});

＆＃13;

.newBorder {
    border: red thin solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div id="selections">
    <ul>
        <li><img class="closeArrow">Company 1
            <ul class="collapse">
                <li><img class="closeArrow">Branch 1-1
                    <ul class="collapse">
                        <li>User 1-1-1</li>
                        <li>User 1-1-2</li>
                        <li>User 1-1-3</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

jquery选择器切换单击隐藏/显示子元素

1 个答案: