Question

我有1次崩溃和使用JavaScript进行扩展。它运作得很好。

HTML

<h4 id="expanderHead" style="cursor:pointer;">
    EXPANDING COLLAPSING DIV <span id="expanderSign">+</span>
</h4>
<div id="expanderContent" style="display:none">
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
</div>

的Javascript

<script type="text/javascript">
$(document).ready(function(){
    $("#expanderHead").click(function(){
        $("#expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

然后我添加一个或多个崩溃和消耗的会话，他们不工作。我将ID更改为CLASS，我点击一个，它消耗所有（因为它是相同的类名）。如果我保留相同的ID，则只有第一个可用。任何方式让它工作？

HTML

<h4 class="expanderHead" style="cursor:pointer;">
    EXPANDING COLLAPSING DIV <span id="expanderSign">+</span>
</h4>
<div class="expanderContent" style="display:none">
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
</div>



<h4 class="expanderHead" style="cursor:pointer;">
        EXPANDING COLLAPSING DIV <span id="expanderSign">+</span>
    </h4>
    <div class="expanderContent" style="display:none">
        content<br />
        content<br />
        content<br />
        content<br />
        content<br />
    </div>

的Javascript

<script type="text/javascript">
$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(".expanderContent").slideToggle();
        if ($("#expanderSign").text() == "+"){
            $("#expanderSign").html("−")
        }
        else {
            $("#expanderSign").text("+")
        }
    });
});
</script>

Answer 1

由于id是唯一的，因此您需要将id="expanderSign"更改为class="expanderSign"。

然后你可以这样做：

$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next().slideToggle();
        if ( $(this).find('.expanderSign').text() == "+"){
            $(this).find('.expanderSign').text("−");
        }
        else {
            $(this).find('.expanderSign').text("+");
        }
    });
});

<强> Fiddle Demo

或者您可以像这样缩短代码：

$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next().slideToggle();
        $(this).find('.expanderSign').text(function(_, v) {
            return v == "+" ? "-" : "+";
        })
    });
});

<强> Fiddle Demo

Answer 2

<script type="text/javascript">
$(document).ready(function(){
    $(".expanderHead").click(function(){
        $(this).next(".expanderContent").slideToggle();
        if ($(this).children("span").text() == "+"){
            $(this).children("span").html("−")
        }
        else {
            $(this).children("span").text("+")
        }
    });
});
</script>

请注意您的两个跨度都有相同的ID“expandderSign”，不应该是这种情况！因此我使用SPAN作为选择器。

扩展和折叠

2 个答案: