如何切换除单击以外的所有jQuery元素？

Question

因此，我试图在jQuery中实现看似非常基本的东西。 我有许多“标题”，当我单击标题时，我希望该标题下的信息向下滑动，而所有其他标题信息向上滑动（以便一次只显示一个标题）。

这是我想要发生的事情的sudo代码：

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
  $(this).children('.game-info-text').slideToggle("Slow");
  [all other ('.game-info-text')].slideUp(fast)
});

不过，对于我的一生来说，我不知道该如何编码第二行（[所有其他（'.game-info-text'）]）。 任何帮助深表感谢！

（我将其实现为drupal行为，这就是为什么要添加“ jquery处理”类的原因）

Answer 1

就像是：

$('.more-info-header:not(.jquery-processed)').addClass('jquery-processed').click(function(e) {
  $(this).children('.game-info-text').slideToggle("Slow");
  $('.more-info-header').not(this).children('.game-info-text').slideUp(fast);
  //                      ^-- removes the clicked element from all `.more-info-header`
});

参考： .not()

Answer 2

听起来您喜欢jQuery UI Accordion插件。

Answer 3

$('.more-info-header:not(.jquery-processed)')
.addClass('jquery-processed').click( function(e) {
  var these = $(this).children('.game-info-text').slideToggle("slow");
  $('.game-info-text').not(these).slideUp("fast");
});

使用not()函数，您可以排除已经选择的元素。

Answer 4

像这样？

  $('.more-info-header').click(function(e){
    var target = e.target || e.srcElement;
   $(this).children().not(target).find('.game-info-text').slideUp('fast');
   $('.game-info-text', target).slideToggle("slow");
  });