个人中心
gpt4 book ai didi

jQuery 多级 Accordion 菜单

转载 作者：行者123 更新时间：2023-12-01 07:09:48 25 4
gpt4 key购买 nike

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

这是我到目前为止所拥有的:

$(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时，很明显，较低的级别还不起作用。子菜单打开，但同时顶层再次关闭。

我怎样才能实现以下行为:

  1. 点击“非事件”菜单项可使其子菜单项可见
  2. 点击“事件”菜单项会隐藏其子菜单项及其子菜单项
  3. 一开始，所有项目都处于“非事件状态”

最佳答案

这应该适合你。

$('.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”属性中，并且单击事件会冒泡，直到到达最外面的容器，该容器是您在 jQuery 选择器中定义的(再次- .多级 Accordion 菜单)。

最外面的容器坐在那里监听“点击”事件，因此当该事件冒泡到它时，它就会进入该函数。

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

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

希望这能澄清一点!

关于jQuery 多级 Accordion 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30178031/

25 4 0
文章推荐： python - 为什么 Python 导出的文件没有关闭？
文章推荐： ios - 如何测试 deinit 是否被正确调用？
文章推荐： java - 总是空指针异常
文章推荐： python - 是否可以将 dtype 设置为现有的结构化数组，或将 "column name"添加到现有数组？