Question

我目前在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'关键字但不熟悉它。

Answer 1

使用此（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>

你没有将ul放在li内，你有两个ul是这样的：

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

Answer 2

尝试

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

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

单击“切换”，使用名称而不是单击的名称触发所有类

2 个答案: