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

假设结构说明了自己，但有一件事：当.collapsed类被删除时，它会扩展项目（在我看来，与构建手风琴的方式相反...... ）。

以某种方式触发jQuery脚本的唯一方法是定位标头（$('.mx-groupbox-header').click()）。它应该做的是找到没有.collapsed类的每个项目并添加它，同时从它的父项中删除它。

我最好的猜测就是这个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

是的，它完全颠倒了，而不是通常做的......

如果这真的是你要使用的标记（点击标题和内容），
你应该在标题点击时找到.closest()（groupbox parent），如：

// 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");
});

通过删除每个类除了当前的折叠式手风琴，但是这个.parent？

1 个答案: