0

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

.html页面：

<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();

});

});

谢谢

4

3 回答 3

3

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

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

    var $this = $(this);

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

});

这将切换所有图像的可见性，这些图像是.toggle_head.

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

这是一个小提琴

于 2013-07-03T08:04:27.900 回答
0

我还为你做了一个小提琴。不同之处在于，它关闭了已经打开的“机构”，这就是我: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()first

（它也有漂亮的图像！）

于 2013-07-03T08:47:43.233 回答
0 
$(".toggle_head").click(function()
{
    $(this).next(".toggle_body").slideToggle(300, function () {
        var status = $(this).is(':hidden');
        $('#collapse').toggle(status);
        $('#expand').toggle(!status);
    });
});

未经测试，但给出了想法

于 2013-07-03T08:01:20.647 回答