如何停止jQuery影响所有元素，当我只想要一个元素更改 [英] How to stop jQuery affecting all elements, when I only want one element to change

问题描述

好，我有一个< li> 的列表，其中包含一些内容：

OK, I have a list of <li>s with some content in like so:

<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> 之一被点击时，使得< div> 可见，

Using jQuery, the <div> is hidden. When one of the <h4>s is 'clicked' the <div> is made visible, and when clicked again is made invisible.

这一切都可以正常工作，除非在任何时候点击< h4> < li> 所有的< div> 都可见。

This all works fine except, when clicking on the <h4> in any <li> all of the <div>s are made visible.

如何阻止这种情况发生？我只想在同一个< li> 中的< div> 表示

How do I stop this happening? I only want the <div> in the same <li> that the <h4> that is clicked to be made visible.

这是我的jQuery：

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

推荐答案

还可以使用'siblings' p>

you can also use the 'siblings' selector

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

这篇关于如何停止jQuery影响所有元素，当我只想要一个元素更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！