当我只想更改一个元素时,如何阻止jQuery影响所有元素

您还可以使用“兄弟姐妹”选择器

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

$(document).ready(function() {
        $('div div').hide();
        $('div h4').click(function(){

                if($(this).parents('div').is(':hidden')) {
                        $(this).find('div').show();
                        $(this).addClass('open');
                        }
                else {
                                $(this).parents('div').hide();
                                $(this).removeClass('open');
                        }
                });
        });

$(document).ready(function() {
            $('div div').hide();
            $('div h4').click(function(){ 
                    var $li=$(this).closest('li');
                    var $innerDiv=$li.find('div')

                    if($innerDiv.is(':hidden')) {
                            $innerDiv.show();
                            $li.addClass('open');
                            }
                    else {
                                    $innerDiv.hide();
                                    $li.removeClass('open');
                            }
                    });
            });

单击处理程序函数正在使用普通 $('foo') 正在浏览全局文档。我敢打赌,这个解决方案涉及到一些 this h4 元素,而不是“文档中的所有内容”。

选择 $('div div') 您正在选择属于其他div的所有div。这适用于您的初始隐藏,因为您正在隐藏所有div,但在if语句中,您可能需要更像 $(this).next()

$(this.parentNode).toggleClass("open").children("div").toggle();

我建议.sibles().first()只影响jQuery查找的第一个同级。