Question

我有几个div's，每个div内有ul's和li's。我有这段代码，当用户点击某些li时，它会在div内显示li。

我需要的是让我们展示用户点击的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>

DEMO

Answer 1

工作小提琴：http://jsfiddle.net/7W7y9/7/

我改变了你的标记，因为它没有任何意义。不要两次使用相同的ID，而是使用CLASS名称。

JavaScript现在看起来像这样：

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

Answer 2

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

.active+.terms{height:auto;}
 .articlesAnswers{display:none;}
 .active+.articlesAnswers{display:block;}

JS

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

}）;

DEMO
对于幻灯片效果，我创建了2个代码变体：CSS3和JQ。

隐藏所有div除了单击之外的所有div

2 个答案: