0

当用户单击“展开 [+]”时，我想在页面上折叠和展开许多 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() 尝试了许多不同的组合，但我似乎无法做到正确。

帮助将不胜感激:)

4

4 回答 4

1

使用带有 jquery 选择器的上下文来访问当前事件源下的元素。

语法： jQuery（选择器[，上下文]）

改变

jQuery(".expanderSign").text()

到

jQuery(".expanderSign", this).text()
于 2013-02-27T10:47:32.857 回答
0

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

例子：

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

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

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

于 2013-02-27T10:48:27.847 回答
0

您可以通过使用切换和定位下一个 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();
});

例子

于 2013-02-27T10:55:58.227 回答
0

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

不完全是我最初追求的，但它运作良好。

于 2013-03-08T06:28:30.620 回答