单击“切换”时，会触发具有名称而不是单击的所有类答案

【问题标题】：on click 'toggle' firing all classes with the name instead of the one clicked单击“切换”时，会触发具有名称而不是单击的所有类
【发布时间】：2025-11-23 13:40:01
【问题描述】：

我目前在 jquery 中遇到了一个相当经典的问题。当一个类被点击时（在一个 ul 中），所有具有该类名的元素都被切换。我真的只希望元素切换为被点击的元素，这是我的一些代码：

js:

$(function(){

    var list = $('.lists');

    list.on({
        'click': function(){
        $('.list-display').toggle('slow');
    }
});

});

html: 

          <ul class ='lists'>
            <li> Soccer
                            <ul class='list-display'>
                                <li> Kick </li>
                                <li> Dribble </li>
                                <li> Pass </li>
                            </ul>
            </li>
            <li> Basketball </li>
                <ul class='list-display'>
                                <li> Shoot </li>
                                <li> Dribble </li>
                                <li> Pass </li>
                            </ul>
            <li> Baseball </li>
                <ul class='list-display'>
                                <li> Catch </li>
                                <li> Throw </li>
                                <li> Hit </li>
                            </ul>
</ul>

当我单击主 ul（足球、篮球、棒球）中的任何 li 时，所有 uls 都嵌入到它们的类别切换中。我只希望单击的那个来切换。如何重新安排我的功能以仅切换单击的一次？我想我必须使用“this”关键字，但不熟悉使用它。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

试试

list.on({
    'click': function(){
    $('.list-display', this).toggle('slow');
}});

我在当前单击的元素中查找.list-display 项目。

【讨论】：

【解决方案2】：

使用这个（Example）：

$('.lists').on('click', 'li', function(){
    $('ul.list-display', this).toggle('slow');
});

另外，你错了HTML，使用这样的东西：

<ul class ='lists'>
    <li> Soccer
        <ul class='list-display'>
            <li> Kick </li>
        </ul>
    </li>
    <li> Basketball
        <ul class='list-display'>
            <li> Shoot </li>
        </ul>
    </li>
</ul>

你没有把所有的uls 都放在li 里面，你有两个这样的uls：

<li> Basketball</li>
    <ul class='list-display'>
        <li>...</li>
    </ul>
<li> Baseball</li>
    <ul class='list-display'>
        <li>...</li>
    </ul>

【讨论】：