Question

所以，我在这里挣扎。即使我点击导航，它也会打开嵌套列表并将类添加到父列表中。这部分几乎可以工作，问题是它将该类添加到父列表中的所有元素。

       <ul>
        <li><div><p class="hidden">Test 1</p>
            <ul class="shown">
                <li>
                   <a href="#"><p>Inner 1</p></a>
                </li>
            </ul>
            </div>
        </li>
        <li><div><p  class="hidden">Test 2</p>
            <ul class="shown">
                <li>
                   <a href="#"><p>Inner 2</p></a>
                </li>
            </ul>
            </div>
        </li>
    </ul>
    <ul>

jque

    $(document).ready(function () {
$('.shown').hide();
$('.hidden').click(function () {
    var $answer = $(this).next('.shown');
    if ($answer.is(':hidden')) {
        $answer.show();
                     $('.hidden').addClass('color1');
    } else {
        $answer.hide();
        $('.hidden').removeClass('color1');
    }
});

    });

CSS

.color1{
   background:red;
}

的jsfiddle

https://jsfiddle.net/Lc5n8k81/1/

Answer 1

这里添加和删除color1类时将$（＆＃39; .hidden＆＃39;）更改为$（this）..因为$（＆＃39; .hidden＆＃39;）会将类添加到所有元素.hidden class

Jsfiddle：https://jsfiddle.net/6moznpbr/

$(document).ready(function () {
    $('.shown').hide();
    $('.hidden').click(function () {
        var $answer = $(this).next('.shown');
        if ($answer.is(':hidden')) {
            $answer.show();
                         $(this).addClass('color1');
        } else {
            $answer.hide();
            $(this).removeClass('color1');
        }
    });
});

Answer 2

在您的点击处理程序中，您要引用$(this)而不是$('.hidden') - 后者表示所有元素与类hidden：

$('.hidden').click(function () {
    var $answer = $(this).next('.shown');
    if ($answer.is(':hidden')) {
        $answer.show();
        $(this).addClass('color1');
    } else {
        $answer.hide();
        $(this).removeClass('color1');
    }
});

https://jsfiddle.net/Lc5n8k81/2/

将类添加到一个元素而不是所有元素，例如内部

2 个答案: