javascript - 当我只想改变一个元素时，如何阻止 jQuery 影响所有元素

Question

好的，我有一个 <li> 的列表有一些内容是这样的:

<div>
    <ul>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
        <li><h4>...</h4><div>...</div></li>
    </ul>
</div>

使用 jQuery，<div>是隐藏的。当 <h4> 之一时s 被“点击”<div>变为可见，再次单击时变为不可见。

除了点击 <h4> 时，一切正常在任何 <li>所有 <div> s 可见。

如何阻止这种情况发生？我只想要 <div>在同一<li>那<h4>单击以使其可见。

这是我的 jQuery:

$(document).ready(function() {
    $('div div').hide();
    $('div h4').click(function(){
        if($('div div').is(':hidden')) {
            $('div div').show();
            $('div li').addClass('open');
            }
        else {
                $('div div').hide();
                $('div li').removeClass('open');
            }
        });
    });

Answer 1

你也可以使用'siblings'选择器

$(document).ready(function() {
    $('div div').hide();
    $('div h4').click(function(){
        $(this.parentNode).toggleClass('open');
        $(this).siblings('div').toggle();
    });
});