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>被“点击”时，<div>会变为可见，而再次点击则会变为不可见。

这一切都运行正常，但是，当点击<h4> <li>中的所有<div>时，所有<div>都可见。

如何阻止这种情况发生？我只希望同一<li>中的<h4> $(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'); } }); });使点击的{{1}}可见。

这是我的jQuery：

{{1}}

Answer 1

你也可以使用'兄弟姐妹'选择器

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

Answer 2

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

Answer 3

试试这个：

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

Answer 4

点击处理程序功能正在使用查看全局文档的普通$('foo')。我敢打赌，解决方案涉及this的一些使用，指的是已点击的实际特定h4元素，而不是“文档中的所有内容”。

Answer 5

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

的内容

Answer 6

以下内容应作为$（“div h4”）的点击事件。点击（...）。

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

Answer 7

我建议使用.siblings（）。first（）来影响jQuery找到的第一个兄弟。

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

7 个答案: