Jquery展开只折叠已单击的div

Question

我在一个页面上有许多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()，但似乎不能正确使用。

如有帮助，将不胜感激:)

Answer 1

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

不完全是我最初想要的，但它工作得很好。

Answer 2

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

选择器语法： jQuery(选择器，上下文)

变化

jQuery(".expanderSign").text()

至

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

Answer 3

您应该使用$(this)来定位您所单击的div。

示例：

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

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

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