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

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

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

css

JSFIDLE

---

在添加和删除color1类时，将$（'.hidden'）更改为$（此）。。as$（'.hidden'）将使用.hidden类向所有元素添加类

Jsfiddle：

---

在添加和删除color1类时，将$（'.hidden'）更改为$（this）。。as$（'.hidden'）将使用.hidden类向所有元素添加类

Jsfiddle：

---

在单击处理程序中，您希望引用

$（this）

而不是

$（'.hidden'）

——后者表示类

隐藏的所有元素：

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

在单击处理程序中，您希望引用
$（此）
而不是
$（'.hidden'）
——后者表示类
隐藏的所有元素：

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


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

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