Question

我正在尝试用3个面板制作手风琴，所以当我点击面板时，它的内容应该出现，当我再次点击它时，其内容应该消失

这是jquery代码

jQuery(".item").click(function() {

    if ( jQuery(".content").css("display") == "block" )
    {
        jQuery(this).css("display", "none");
    }

    else if ( jQuery(".content").css("display") == "none" )
    {
        jQuery(this).css("display", "block");
    }
}

但问题在于 jQuery（this）这里指的是“。item”类，当点击时整个面板都会消失。

所以我想引用“。content”，以便仅显示或不显示所点击面板的内容。

这是HTML代码：

<div class="container">
    <div calss="row">
        <div class="accordion">

            <div class="item">
                <div class="content"></div>
            </div>

            <div class="item">
                <div class="content"></div>
            </div>

            <div class="item">
                <div class="content"></div>
            </div>

        </div>
    </div>
</div>

我试过这个

jQuery(".item").click(function() {

    if ( jQuery(".content").css("display") == "block" )
    {
        jQuery(".content").css("display", "none");
    }

    else if ( jQuery(".content").css("display") == "none" )
    {
        jQuery(".content").css("display", "block");
    }
}

但是当点击时，所有3个面板的内容都会显示/消失。任何建议将不胜感激

Answer 1

如果您在this的第二个参数中传递jQuery，则会在.content中找到this。像这样：

jQuery(".item").click(function() {

    if ( jQuery(".content", this).css("display") == "block" )
    {
        jQuery(".content", this).css("display", "none");
    }

    else if ( jQuery(".content", this).css("display") == "none" )
    {
        jQuery(".content", this).css("display", "block");
    }
})

您的点击处理程序正在使用选择器查找所有元素，因此传递this将限制范围以找到要隐藏/显示的元素。

要优化此代码，请尝试存储到变量中，因为调用jQuery / $()可能会很昂贵，尤其是如果您需要在处理程序内多次访问该元素。您可以使用toggle功能将其状态从可见状态切换为隐藏状态，反之亦然。

jQuery(".item").click(function() {

    jQuery(".content", this).toggle();
});

Answer 2

jQuery构造函数可以使用第二个参数来设置从中开始搜索的元素，因此您可以使用：

 $('#table').scroll(function() {
   if($('#table').scrollTop() + $('#table').height() == $('table').height()) {
     for(var i = 0; i <= 50; i++) {
       //Append next value in your array to bottom
     }
   }
});

这在语义上与（但更短）相同：

jQuery('.content', this)

您应该考虑优化代码，以避免不必要的重复和评估选择器：

jQuery(this).find('.content')

或者更好的是，只需使用内置的jQuery方法来切换元素的可见性，并获得免费的动画转换（如果你想要它们）：

jQuery('.item').on('click', function() {
    var content = jQuery('.content', this);
    var display = content.css('display');

    if (display === 'block') {
        display = 'none';
    } else if (display === 'none') {
        display = 'block';
    }
    content.css('display', display);
}

在if语句中使用$（this）

2 个答案: