Question

我在网上找到了一些手风琴菜单，但要么他们不支持多个级别，要么代码非常神秘，我不想使用它。所以我决定，我想写自己的手风琴菜单，它支持任意数量的子菜单。

这是我到目前为止所做的：

$(document).ready(function() {

  // at the beginning only the top menu items are visible
  $('.multi-level-accordion-menu > li ul').slideUp(0);
  console.log('all elements slid up');

  // when a menu item which is not active is clicked, show the next lower level
  // when a menu item which is active is clicked, hide all its sub menu items
  $('.multi-level-accordion-menu li').click(function() {
    var menu_item = $(this);

    if (is_active(menu_item)) {
      console.log('active menu item clicked');
      close_menu_item(menu_item);

    } else {
      console.log('inactive menu item clicked');
      open_menu_item(menu_item);
    }
  });

  console.log('READY!');
});

function open_menu_item(menu_item) {
  menu_item.children('ul').slideDown(500);
  menu_item.addClass('active-menu-item');
}

function close_menu_item(menu_item) {
  console.log('1x');

  menu_item.find('ul').each(function(index, elem) {
    $(elem).slideUp();
    return false;
  });

  menu_item.removeClass('active-menu-item');
}

function is_active(menu_item) {
  return menu_item.hasClass('active-menu-item');
}

.multi-level-accordion-menu * {
  margin: 0px;
  padding: 0px;
}
.multi-level-accordion-menu {
  list-style: none;
  max-width: 200px;
}
.multi-level-accordion-menu ul {
  list-style: none;
}
.multi-level-accordion-menu li {
  border-color: #EEEEEE;
  border-width: 1px;
  border-style: solid;
  background-color: #303030;
  margin: 2px;
  padding: 2px;
  line-height: 30px;
  font-size: 16px;
}
.multi-level-accordion-menu {
  color: #DDDDDD;
}
body {
  background-color: #202020;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div>
    <ul class='multi-level-accordion-menu'>
      <li>Item 1
        <ul>
          <li>Item 1.1
            <ul>
              <li>Item 1.1.1</li>
              <li>Item 1.1.2</li>
              <li>Item 1.1.3</li>
              <li>Item 1.1.4</li>
            </ul>
          </li>
          <li>Item 1.2</li>
          <li>Item 1.3</li>
          <li>Item 1.4</li>
          <li>Item 1.5</li>
          <li>Item 1.6</li>
        </ul>
      </li>
      <li>Item 2</li>
      <li>Item 3
        <ul>
          <li>Item 3.1
            <ul>
              <li>Item 3.1.1</li>
              <li>Item 3.1.2</li>
              <li>Item 3.1.3</li>
              <li>Item 3.1.4</li>
            </ul>
          </li>
          <li>Item 3.2</li>
          <li>Item 3.3</li>
          <li>Item 3.4</li>
          <li>Item 3.5</li>
          <li>Item 3.6</li>
        </ul>
      </li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
    </ul>
  </div>
</body>

http://jsfiddle.net/Zelphir/1fp03oyq/1/

顶级菜单项上的点击有效，但是当我点击Item 1然后点击Item 1.1时，显而易见的是，较低级别的效果还不行。子菜单打开但不知何故同时顶层再次关闭。

如何实现以下行为：

单击“非活动”菜单项可使其子菜单项可见
点击“有效”菜单项会隐藏其子菜单项及其子菜单项
一开始所有项目都是“无效”

Answer 1

这应该适合你。

$('.multi-level-accordion-menu').click(function(e){
    var menu_item = $(e.target);

    if(is_active(menu_item)) {
        console.log('active menu item clicked');
        close_menu_item(menu_item);

    } else {
        console.log('inactive menu item clicked');
        open_menu_item(menu_item);          
    }
});

function close_menu_item(menu_item) {
    console.log('1x');

    menu_item.find('ul').each(function() {
        $(this).slideUp().find('li').removeClass('active-menu-item');
    });

    menu_item.removeClass('active-menu-item');
}

或一个/两个班轮

function close_menu_item(menu_item) {
    console.log('1x');  

    menu_item.removeClass('active-menu-item').find('ul').slideUp().
    find('li').removeClass('active-menu-item');
}

回应您的评论：

在这种情况下，冒泡是导致'click'方法在最外层容器上触发的原因（.multi-level-accordion-menu）。

当你点击一个子元素时，它存储在'event'对象的'target'属性中，click事件会一直冒泡，直到它到达你在jQuery选择器中定义的最外面的容器（再次 - .multi-level-accordion-menu）。

最外面的容器坐在那里听“点击”事件，所以当这个事件冒泡到它时，它会进入函数。

然后，您正在选择触发它的目标元素（存储在'event'对象的'target'属性中）并在其上执行您想要的任何操作。由于您现在位于函数内部并且没有事件侦听器，因此不再触发任何事件，因此没有进一步的冒泡。该功能完成，不再触发“点击”事件，因为事件已经冒泡到顶部。

在原始代码中，您正在侦听所有“li”元素上的单击事件，因此当您单击“li”元素时，它会立即触发单击侦听器，然后运行您的函数。然后当函数完成时，事件将冒泡到祖先'li'元素，再次触发侦听器并再次运行该方法。等等。

希望这有点清除它！

jQuery多级手风琴菜单

1 个答案:

回应您的评论：