切换不适用于我的jQuery

Question

所以目前我已经写了一个程序，当你点击一个新闻'.article'标题， '.description'下方弹出来，标题被加亮灰色和所有其他的头条保持关闭。 然后，当您单击另一个标题时，您单击的第一个标题将关闭，而新标题将突出显示并打开。 javascript看起来像这样：

var main = function() {
$('.article').click(function() {
    $('.article').removeClass('current');
    $('.description').hide();

    $(this).addClass('current');
    $(this).children('.description').toggle();
});

};

$(document).ready(main);

这是'current'的CSS看起来像这样：

.current .item {
 background: rgba(206,220,206,.9);
}

现在，我的问题是，我希望当您再次单击该文章时将其关闭 。 这就是为什么我编写了切换命令$(this).children('.description').toggle(); 而不只是.show()

但这不是在跳动...为什么？ 它会打开，但是除非我单击另一个文章标题，否则它不会关闭。 我希望我对自己写的东西有所了解。 这是我第一次学习javascript，可以使用帮助。

完全公开 ：这是从Codeacademy关于构建交互式网站的课程中得出的，但是他们的Q / A无法解决我的问题，并且显然不再受到监视，因为他们正在中止这一课程。

编辑 ：根据要求，这是HTML的示例（它很长，所以我不想发布整个内容，但如果需要的话，我会发布）。

<div class="article">
    <div class="item row">
      <div class="col-xs-3">
        <p class="source">AW Commercial Aviation</p>
      </div>
      <div class="col-xs-6">
        <p class="title">CSeries Supplier Scramble</p>
      </div>
      <div class="col-xs-3">
        <p class="pubdate">Mar 22</p>
      </div>
    </div>
    <div class="description row">
      <div class="col-xs-3">&nbsp;</div>
      <div class="col-xs-6">
        <h1>CSeries Supplier Scramble</h1>
        <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p>
      </div>
      <div class="col-xs-3">&nbsp;</div>
    </div>
  </div>

谢谢，

学习编码

Answer 1

问题是$('.description').hide(); 隐藏所有.description元素，然后切换当前元素以显示。 您只需要隐藏不是当前文章的子项的那些

这是一个更简单的方法（根据Scott的回答，您一定喜欢我们所有人互相推动变得更好）：

 $(document).ready(function() { $('.article').on('click', function() { var $this=$(this).toggleClass('current'); $('.article').not($this).removeClass('current'); }); }); 

 .current .item { background: rgba(206, 220, 206, .9); } .article:not(.current) .description { display: none; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> 

---

原始答案：

问题是$('.description').hide(); 隐藏所有.description元素，然后切换当前元素以显示。 您只需要使用以下内容隐藏不是当前文章的子级的子项即可：

$('.article').not($(this)).find('.description').hide();

 $(document).ready(function() { $('.article').click(function() { $('.article').removeClass('current'); $('.article').not($(this)).find('.description').hide(); $(this).addClass('current'); $(this).children('.description').toggle(); }); }); 

 .article.current { background: rgba(206, 220, 206, .9); } .article:not(.current) .description { display: none; } 

 <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div> 

Answer 2

简化了。

您只需切换click元素的类，而无需添加和删除同一类。 这就是toggleClass()目的。

默认情况下，使用用于项目隐藏/显示的变量并使用CSS隐藏该类的效率更高。 您不必等待DOM加载就可以隐藏事物。

 var main = function() { $('.article').on('click',function() { var desc = $(this).children('.description'); $(this).toggleClass('current'); //simple class toggle on click element $(desc).toggle(); }); }; $(document).ready(main); 

 .current .item { background: rgba(206,220,206,.9); } .description { display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="article"> <div class="item row"> <div class="col-xs-3"> <p class="source">AW Commercial Aviation</p> </div> <div class="col-xs-6"> <p class="title">CSeries Supplier Scramble</p> </div> <div class="col-xs-3"> <p class="pubdate">Mar 22</p> </div> </div> <div class="description row"> <div class="col-xs-3">&nbsp;</div> <div class="col-xs-6"> <h1>CSeries Supplier Scramble</h1> <p>Three months before the planned first flight of its CSeries, Bombardier is grappling with supplier issues crucial to meeting its production cost...</p> </div> <div class="col-xs-3">&nbsp;</div> </div> </div>