Javascript 单击'；切换'；使用名称而不是单击的名称触发所有类

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

js:

$（函数（）{
变量列表=$（'.lists'）；
名单({
“单击”：函数（）{
$（'.list display'）。切换（'slow'）；
}
});
});
html:

足球

踢
运球
通过


篮球

射门
运球
通过

棒球

抓住
扔
击中

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

使用this（）：

此外，如果您有错误的

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>

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

试一试

我在当前单击的元素中查找

.list display

项

<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>

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

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