Question

我有一个简单的问题。我开发了一些使用slideToggle折叠并扩展到DIV的代码。我现在要做的是显示/隐藏相应的展开和折叠图像。

.htmlpage：

<li>
<div class="toggle_head togglebackground">
    &nbsp<img src="images/expand.png" alt="Expand" id="expand" class="expand">
    &nbsp<img src="images/collapse.png" alt="Collapse" id="collapse" class="collapse">
    <label> Cookies</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about cookies.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Cookies) -->
</li>
<li>
<div class="toggle_head togglebackground">
    &nbsp<img src="images/expand.png" alt="Expand" id="expand" class="expand">
    &nbsp<img src="images/collapse.png" alt="Collapse" id="collapse" class="collapse">
    <label> Terms</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about terms and conditions.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Terms) -->
</li>

jQuery代码：

$( document ).ready(function() {

//hide the all of the element with class msg_body
$(".toggle_body").hide();
$(".collapse").hide();

//toggle the componenet with class msg_body
$(".toggle_head").click(function()
{
    $(this).next(".toggle_body").slideToggle(300);
    //$(".collapse").show();
    //$(this).next(".collapse").show();

});

});

由于

Answer 1

您可以使用slideToggle回调toggle展开/展开元素的可见性：

$(".toggle_head").click(function() {

    var $this = $(this);

    $this.next(".toggle_body").slideToggle(300, function() {
      $this.children('img').toggle();
    });

});

这将切换.toggle_head的直接子项的所有图像的可见性。

顺便说一句，听起来好像你在多个元素上使用相同的ID。删除它们，ID必须是唯一的。

Here's a fiddle

Answer 2

$(".toggle_head").click(function()
{
    $(this).next(".toggle_body").slideToggle(300, function () {
        var status = $(this).is(':hidden');
        $('#collapse').toggle(status);
        $('#expand').toggle(!status);
    });
});

未经测试，但提出了想法

Answer 3

我也为你做了Fiddle。不同的是，它关闭了已打开的“实体”，这就是我在那里使用:visible

的原因

$( document ).ready(function() {
    $(".toggle_head").click(function()
    {
        if ($(this).next(".toggle_body").css('display')!=='block') {
            $(".toggle_body:visible").slideToggle(300);
            $(this).next(".toggle_body").slideToggle(300);
            $(this).find('img').toggle();
        }
    });
});

首先使用CSS代替hide()

（也有很好的图像！）

jQuery - 在展开折叠切换时显示/隐藏图像

3 个答案:

Here's a fiddle