Javascript 单击div时打开和关闭框

我正在我的站点上运行一些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之一）时，这个关闭，那个打开。所以基本上一次只能打开一个

我的另一个想法不那么重要，但会很酷。目前，div类“arrow”包含一个箭头指向下方的背景图像，打开该框时，最好让箭头指向上方，可以旋转180，也可以只切换背景图像

---

欢迎任何建议，谢谢

为所有“关闭”块指定一个共享类，然后当单击某个触发打开的内容时，您可以运行一些代码，对该类的所有元素执行操作-在您的情况下，关闭或隐藏它们，当然，除了被点击的答案之外。

在你的工作中避免重新发明轮子答案，但在学习新东西时可能会用到

最好的解决方案是使用：jqueryui-Accordion

请查看以下示例：

---

如果还有什么不清楚的地方，请随时询问。

我想你想要的可能是这样的样子/行为

<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>

$（文档）.ready（函数（）{
$（“div”）。单击（函数（）{
$（“ul”）。每个（函数（）{
如果（$（this）.is（“：可见”））
$（此）.toggle（100）；
});
jQuery（“ul”，this.toggle（100）；
});
});
清单一

元素，列表一

清单二

元素，列表二

清单三

元素，列表三

您好，谢谢您的来信。您是说使用Jquery添加一个类吗？然后我就可以把所有其他的都作为函数的一部分了？我的Java真的很棒，我的html、css和php也不错，但是Java……你可以——但你不必——我的意思是（等等）。。。然后您可以使用jQuery对所有将“myBox”作为类的对象执行操作：（“.myBox”）.doSomething（）嗨，我认为这与我所拥有的类似，所以我可以只修改我正在使用的代码？如果你想看一看的话，我在原始帖子中发布了我网站的链接。我想你已经得到了上面最好的答案！漂亮的网站顺便说一句。谢谢Codecraft，它将很快上线，所以我希望我能及时准备好它！这花了很长时间，可能是一个更好的设计，有时我认为你必须做一些事情，虽然，这么多的想法和这么少的时间在一天！Wordpress页面在IMO上有一些很酷的jquery，它不是高级的，但效果很酷，我认为…唯一的问题是你第一次看到它时，图像并没有被缓存，所以有点不稳定。可以通过某种方式预加载它们……我只是想做点什么，然后试一试。@experimentX-该网站看起来很棒，从未听说过，但我会将其保存到收藏夹中，这是一个好主意。你写的代码和我现在的代码一样…@黑匣子操作-谢谢，我会看看我是否可以修改它，使其按照我需要的方式工作。我以前从未使用过这个网站/论坛，我对它的快速响应感到惊讶。我花了相当多的时间在Wordpress论坛上，那里也很好。@experimentX以前也从未见过那个网站，但我会再次。。向上投票并添加书签@Dan@Codecraft好吧，这只是一把分享代码的好小提琴。回头见。jQuery手风琴也可以，看看你们的网站，它非常相似。所以我投了更高的票。好吧，所以手风琴没那么好用，它拿走了底部的div，而且在打开的时候看起来很不可靠。我注意到一些JQuery运行非常平稳，而其他部分则相当“笨重”。它还把一个蓝色的戒指（在狩猎中）戴在我的头上，看起来很气愤！我想我可以回到另一个代码。另一方面，如果我做得对的话，它非常、非常容易实现。我刚刚从google链接了UI，并使用了.accordion函数。很酷，一定要看看UI的东西。