javascript - 将类添加到一个元素而不是所有元素，例如里面

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 类时将 $('.hidden') 更改为 $(this).. 因为 $('.hidden') 会将类添加到具有 .hidden 类的所有元素

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');
        }
    });
});