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

这应该会折叠所有尚未折叠的容器（或者只是崩溃所有容器，无论如何都应该这样做。

Answer 2

我在第一个div（container_collapsed）上使用以下onclick代码找到了一个解决方案

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

感谢您的意见和建议。

使用slidetoggle扩展动态div - 在展开这个div时如何关闭另一个？

2 个答案: