Question

我在页面上有多个div，当用户点击＆＃34时，我想要折叠和展开;展开[+]＆＃34;

以下代码适用于一个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

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

语法： jQuery（selector [，context]）

更改

jQuery(".expanderSign").text()

到的

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

Answer 2

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

示例：

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

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

使用.on()而非.click()。

Answer 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

Answer 4

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

不完全是我原来的，但它运作良好。

Jquery只展开折叠已被点击的div

4 个答案: