如何修改此代码以允许其他元素触发事件？

Question

HTML

<div id="sidebar">
<ul>
    <li>
        <h2>
            HEADER
        </h2>
        <ul>
            <li><a href="#">li3</a></li>
            <li><a href="#">li2</a></li>
            <li><a href="#">li3</a></li>
        </ul>
    </li>
</ul>
</div>

的jQuery

$(document).ready(function () {
    $('li').click(function () {
        if ($('ul', this).is(":hidden")) {
            $('ul', this).slideDown("slow");
        }
        else {
            $('ul', this).slideUp("slow");
        }
    }
);
});

如果点击slideUp()，我只想要slideDown()，<h2>。目前，如果单击任何<li>，则会调用它们。

我该如何解决这个问题？

Answer 1

$(document).ready(function () {
    $('h2').click(function () {
        $(this).next('ul').slideToggle('slow');
    });
});

Answer 2

如果您希望在点击h2时触发，则不应该这样做吗？

$(document).ready(function () {
    $('h2').click(function () {
        if ($('ul', this).is(":hidden")) {
            $('ul', this).slideDown("slow");
        }
        else {
            $('ul', this).slideUp("slow");
        }
    }
);
});