jquery展开只折叠已点击的div答案

【问题标题】：Jquery to expand collapse only the div that has been clickedjquery展开只折叠已点击的div
【发布时间】：2013-02-27 10:45:59
【问题描述】：

当用户单击“展开 [+]”时，我想在页面上折叠和展开许多 div

以下代码适用于一个 div

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section" style="overflow:hidden;">
some stuff
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".expanderHead").click(function(){
    if (jQuery(".expanderSign").text() == "Expand [+]")
    {
    jQuery("#profile-section").removeClass("height-min");
    jQuery("#profile-section").addClass("height-auto");
    }
    else
    {
    jQuery("#profile-section").removeClass("height-auto");
    jQuery("#profile-section").addClass("height-min");
    }

    if (jQuery(".expanderSign").text() == "Expand [+]"){
        jQuery(".expanderSign").text("Collapse [-]");
    }
    else {
        jQuery(".expanderSign").text("Expand [+]");
    }


});
});
</script>

如果我在页面上有许多 div

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section1" style="overflow:hidden;">
some stuff
</div>

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section2" style="overflow:hidden;">
some stuff
</div>

<h4 class="expanderHead" style="cursor:pointer;">Contact information <span class="expanderSign">Expand [+]</span></h4>
<div id="profile-section3" style="overflow:hidden;">
some stuff
</div>

etc....

如何修改我的 jquery 以便它单独适用于所有这些 div。即它只会最小化或最大化已点击的 div？

我使用 (this) 和 parent() 和 child() 尝试了许多不同的组合，但我似乎无法正确使用。

我们将不胜感激:)

【问题讨论】：

标签： jquery this parent-child parent

【解决方案1】：

使用context with jquery selector访问当前事件源下的元素。

语法： jQuery( 选择器 [, context ] )

改变

jQuery(".expanderSign").text()

到

jQuery(".expanderSign", this).text()

【讨论】：

【解决方案2】：

你应该使用$(this)来定位你点击的div。

示例：

$(".expanderHead").on('click', function(){
   $(this).hide();
});

在这种情况下，您将单击的 div 将消失。

使用.on() 而不是.click()。

【讨论】：

【解决方案3】：

您可以通过使用切换并像这样定位下一个 div 来简化它：

<h4 class="expanderHead">Contact information <span class="expanderSign" style="cursor:pointer;">[+]</span></h4>
<div class="expanderContent">some stuff</div>

$(".expanderContent").hide();
$(".expanderSign").on('click', function () {
    $(this).text($(this).text() == '[+]' ? '[-]' : '[+]');
    $(this).parent().next("div").toggle();
});

Example

【讨论】：

【解决方案4】：

感谢所有建议。最后我选择了手风琴 - http://jqueryui.com/accordion/

不完全是我最初所追求的，但效果很好。

【讨论】：