单击div时打开和关闭框

Question

我在我的网站上运行一些jQuery，当点击div时打开并关闭框。

我有以下几点;

$(document).ready(function(){
    $('.hide-text').hide(); 
    $('.hidden_answer').hide();
    $('.show-text').click(function(){ 
        $('.hide-text').toggle(100); 
    });
    $('.home_questions_top').click(function(){
        $(this).next('.hidden_answer').slideToggle(200);
    });

这是HTML结构。 这些代码块大约有7个或8个;

   <div class="home_questions_top">
       <h3>Test</h3><div class="arrow"></div> 
       <div class="clear"></div>
   </div><!--home questions top--> 
   <div class="hidden_answer">
       <p>blah blah blah blah</p>
   </div>
   <div class="closed_blue"></div>
   <div class="home_questions_bottom"></div>

到目前为止，您单击顶部div并打开“隐藏答案”。 我想让jQuery有点不同，我可以这么做，当你打开盒子时通过计时它打开的顶部div就像现在一样，但是当你喜欢不同的div（其他7或8中的一个）说这个关闭了，那一个打开了。 所以基本上只有一个可以一次打开？

我的另一个想法并不重要，但很酷。 目前div类“箭头”包含一个向下箭头的背景图像，当打开盒子时可以指向它，可能是通过旋转180或只是切换背景图像....

欢迎任何建议，谢谢！

Answer 1

我认为你所追求的可能看起来像这样......

<script>
$(document).ready(function(){

    $("div").click(function(){
        $("ul").each(function(){
            if( $(this).is(":visible") )
                $(this).toggle(100);
        });
        jQuery("ul", this).toggle(100);
    });
});
</script>

<div> List One
    <ul style="display:none">
        <li>element, list one</li>
    </ul>
</div>

<div> List Two
    <ul style="display:none">
        <li>element, list two</li>
    </ul>
</div>

<div> List Three
    <ul style="display:none">
        <li>element, list three</li>
    </ul>
</div>

Answer 2

重新发明轮子的答案是在工作中避免的，但在学习新东西时可以使用。

最适合您的解决方案是使用： jquery UI Accordion

看看这些样本： http ： //jqueryui.com/demos/accordion/

并且随时可以询问是否有任何不清楚的地方。

Answer 3

给所有'close'块一个共享类，然后当点击触发open的东西时，你可以运行一些代码来处理该类的所有元素 - 在你的情况下，关闭它们或隐藏它们，好吧，除了那个被点击的当然。