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

Question

我正在努力在页面上显示一些动态内容。我在要展开和关闭的 div 上使用 onclick 函数。我已经让它工作，这样我就可以通过单击它来打开和关闭一个 div，但是单击其他 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？

Answer 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.
    });
});

这应该折叠所有尚未折叠的容器(或者只是折叠所有容器，不管怎样，应该做同样的事情。