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的内容时，你可以运行一些代码来处理该类的所有元素 - 在你的情况下，关闭它们或者好吧，除了当然点击的那个之外，隐藏它们。

单击div时打开和关闭框

3 个答案: