使用 slidetoggle 扩展动态 div - 扩展此 div 时如何关闭另一个？答案

【问题标题】：using slidetoggle to expand dynamic div - how do I close the other when expanding this div?使用 slidetoggle 扩展动态 div - 扩展此 div 时如何关闭另一个？
【发布时间】：2014-08-29 14:31:23
【问题描述】：

我正在努力在页面上显示一些动态内容。我在要展开和关闭的 div 上使用 onclick 功能。我已经使它工作，这样我就可以通过单击它来打开和关闭一个 div，但是单击其他 div 不会关闭当前展开的那个。我希望这是有道理的。一些代码：

<div class="container collapsed">
    <div id="a_<?php echo $a->id?>" class="<?php echo $div_class?>" onclick="$(this).find('.content').slideToggle();$(this).siblings().slideUp();">    
        <div class="t">
            <?php echo date('H:i', strtotime($a->start))?> - <?php echo date('H:i', strtotime($a->end))?>
        </div>
        <div class="i">
        <?php echo $a->id?>
        </div>
        <div class="tt">
            <?php echo $a->name?>
        </div>
        <div class="l">
            &nbsp;<?php echo $a->l?>
        </div>
    <?php while($c=$obj->fetchNextObject($sql)):?>
        <div class="c">
            <?php echo $c->name_2?>
        </div>
     <?php endwhile ?>
    <div class="content">
        <p>content</p>
    </div>
            <div class="<?php echo $s_class?>">
    <div class="bottom_line"></div>
    <div class="bottom_line2"></div>  
</div>
</div>


</div>

我希望代码不会太模糊。问题确实出在 jQuery 部分——其他一切都正常工作。单击另一个 div 时如何关闭一个 div？

【问题讨论】：

你要上下滑动哪些div？
假设您有多个<div class="container collapsed"> 是否正确？
是的，这些 div 有多个。它们是从接收提要的数据数据库中动态创建的。当关闭容器折叠 #1 打开时会出现问题，然后我单击例如容器折叠#2 应该关闭所有其他打开/展开的 div。关闭 div 的唯一方法是再次单击同一个 div - 这很好，但另一件事也应该有效。
您应该从摆脱内联javascript开始，将所有内容放在一个事件处理程序中，您将能够处理所有这些。

标签： php jquery html css

【解决方案1】：

如前所述，分离您的 javascript。无论如何，我会尝试回答您的问题，认为代码示例可能不完全适合：如果我要这样做，我会使用您的课程collapsed。例如：

$(function() {//on document load
    $('.container').click(function(){
        //close all containers
        $('.container:not(.collapsed)').slideUp();
        $('.container:not(.collapsed)').addClass('collapsed');
        //your code here to open the container clicked.
    });
});

这应该折叠所有尚未折叠的容器（或者只是折叠所有容器，无论如何，应该做同样的事情。

【讨论】：

【解决方案2】：

我自己在第一个 div (container_collapsed) 上使用以下 onclick 代码找到了解决方案

onclick="$(this).siblings().children().children('.content').slideUp(200);$(this).children().children('.content').slideToggle(200);"

感谢您的意见和想法。

【讨论】：