通过删除每个手风琴的类来折叠手风琴（当前除外），但这个。父级？

Question

所以我坚持使用一个插件，它提供了一个简单的手风琴，但不提供自动折叠。我试图创建一个简单的脚本，但我没有成功。

让我提供一些DOM结构：

.mx-groupbox-collapsible.collapsed
  .mx-groupbox-header
  .content
.mx-groupbox-collapsible.collapsed
  .mx-groupbox-header
  .content
.mx-groupbox-collapsible.collapsed
  .mx-groupbox-header
  .content

假设结构不言自明，但有一点是：当。折叠类被删除时，它会扩展项目（在我看来，这与构建手风琴的方式相反...）。

不知何故，触发jQuery脚本的唯一方法是针对标头（$（'. mx-groupbox-head'）. Click（））。它应该做的是找到每个没有的项目。折叠类并添加它，同时将其从父类中删除。

我最好的猜测是这段jQuery。

// Target the inner accordion item header
$(".mx-groupbox-header").click(function() { 

  // Target each accordion item that doesn't have class 'collapsed',
  // except the parent of the current clicked item
  $('.mx-groupbox-collapsible').not([$('.collapsed'),$(this).parent()]).each(function(){

      // Add 'collapsed' class, so current opened item, except current will collapse
      $(this).addClass('collapsed');
  });
});

谁能告诉我哪里出了问题，并为我提供解决方案？

Answer 1

是的，它比通常做的完全相反。。。

如果这真的是您要使用的标记（单击标头和其他东西），
您应该在标头单击-找到。最近（）（groupbox父），如：

// Cache dropdowns
var $collapsible = $('.mx-groupbox-collapsible');


// Target the inner accordion item header
$(".mx-groupbox-header").click(function() { 

  // Find header's collapsible parent
  var $myCollapsible = $(this).closest('.mx-groupbox-collapsible');

  // Target each accordion item that doesn't have class 'collapsed',
  // except the parent of the current clicked item
  $collapsible.not( $myCollapsible ).addClass("collapsed");

  // Eventually (if needed?) do also:
  $myCollapsible.removeClass("collapsed");
});