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

I am working on showing some dynamic content on a page. I am using the onclick function on the div that I want to expand and close. I have made it work such that I am able to open and close a div by clicking on it, but clicking on other div will not close the currently expanded one. I hope this makes sense. Some code:

我正在努力在页面上显示一些动态内容。我正在使用我要扩展和关闭的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>

I hope the code is not too obscurred. The problem really is the jQuery part - everything else works as it should. How do I make one div close when clicking on another div?

我希望代码不会太受阻碍。问题实际上是jQuery部分 - 其他一切都按原样运行。单击另一个div时如何关闭一个div?

2 个解决方案

#1

As mentioned, separate your javascript. Anyway, I'll TRY to answer your question thought the code sample might not fit perfectly: If I were to do this I'd use your class collapsed. For example:

如上所述,将您的javascript分开。无论如何,我会尝试回答你的问题,认为代码示例可能不完全适合:如果我这样做,我会使用你的课程崩溃。例如:

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

This should collapse all containers that aren't already collapsed (or just collapse all of them regardless, should do the same thing.

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

#2

I found a solution myself using the following onclick code on the first div (container_collapsed)

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

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

Thanks for the input and ideas.

感谢您的意见和建议。

#1