Javascript 隐藏所有div'；除了点击的那一个

我有几个

div

，在每个

div

中我有

ul

和

li

。我有这个代码，当用户点击一些

li

时，它会在

li

内显示一个

div

我需要的是显示用户单击的

div

，然后关闭其他

你能帮忙吗

Javascript代码：

$(document).ready(function() {
$('li').each(function() {
    var tis = $(this), state = false, answer = tis.next('#terms, #articlesAnswers').hide().css('height','auto').slideUp();
    tis.click(function() {
        state = !state;
        answer.slideToggle(state);
        tis.toggleClass('active',state);
    });
});
});

HTML代码：

<ul id="termsArticles">
            <li>Article 1 – Registration, account management and rescission</li>
                <div id="terms">
                    <ul>
                        <li>Access conditions and registration</li>
                            <div id="articlesAnswers">
                                test text!
                            </div>
                        <li>Account Management</li>
                            <div id="articlesAnswers">
                                test text!
                            </div>
                    </ul>
                 </div>

<li>Article 2 – Free services</li>
  <div id="terms">
     <ul>
         <li>publish an ad for a project or event</li>
          <li>apply to an ad</li>
     </ul>
 </div>

第1条-登记、账户管理和撤销

准入条件和登记
测试文本！
帐户管理
测试文本！

第2条-免费服务

发布项目或事件的广告
适用于广告

工作小提琴：

我改变了你的标记，因为它没有任何意义。永远不要使用同一个ID两次，改用类名

JavaScript现在看起来像这样：

$(document).ready(function() {
    $("li").click(function(e) {
    $(this).parents(".terms").find(".articlesAnswers").hide();
    $(this).children(".articlesAnswers").show();
  });
});

---

不要在一页上使用重复的ID。这是不正确的
CSS:

JS

}))

---

对于幻灯片效果，我创建了两种代码变体：with和with。

最好清楚地了解HTML结构，文字可能会使事情变得混乱。至少我们需要HTML结构。最好是在小提琴中创建一个测试设置。完成，请检查？

id

属性必须唯一。您的示例代码使用id

articlesAnswers

和

术语两次。。你应该使用classes你也不应该把div元素放在一个列表中。你的小提琴做了我需要的一部分。但是当你点击第一个里的第二个li时，它无论如何都会关闭，不会像我需要的那样工作。您的第一个LI运行良好，但当您单击第一个LI:
第1条-注册、帐户管理和撤销时，所有LI的内部都应隐藏，并且仅显示测试文本！在您点击LI'sAnon后，很抱歉再次请求您的帮助，但您能否帮助我找到在单击打开和关闭时在何处插入“慢速”效果？您可以使用CSS3执行此操作。我为您的请求更改了代码我正试图做出如下效果：
.active+.terms{height:auto;}
 .articlesAnswers{display:none;}
 .active+.articlesAnswers{display:block;}

$(document).ready(function() {
  $("#termsArticles li").click(function(){
    if ($(this).hasClass('active')){
        $(this).toggleClass('active')
    } else {
        $(this).parent().find('>li').removeClass('active');
        $(this).addClass('active');
    }
})