超级菜单中的 JS 切换子菜单

Question

我遇到的问题是，在另一个菜单中创建子菜单。

演示：LIVE DEMO (Important, cause CSS is needed as well

$(function () {
  // Desktop Menu
  var categoriesMenu = $(".list-ausbildung-categories li");
  var triggerMenu = $(".dropdown-submenuSide");
  var highlightsList = $(".list-ausbildung-highlights");
  var submenuList = $(".list-ausbildung-submenu");

  $('.list-ausbildung-categories').on('click', 'li', function () {

      if( $(this).hasClass('active') ){
          triggerMenu.removeClass('asg-gray-bg-200');
          $(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
      } else {
          highlightsList.hide();
          submenuList.show();
          triggerMenu.addClass('asg-gray-bg-200');

          $('li.active').removeClass('active');
          $(this).addClass('active');

          var subMenu = $(this).find(".dropdown-submenu").html();

          $(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
      }
  });

  $('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
      categoriesMenu.removeClass('active');
      triggerMenu.removeClass('asg-gray-bg-200');
      submenuList.hide();
      highlightsList.show();
  });
});

我有这个 Bootstrap 超级菜单，它还包含一个子菜单（第 2 列）。单击时，它应该隐藏第 3 列，并显示子菜单项。（它完成了它的工作）

目前，我正在使用 jquery html() 抓取子菜单内容，然后将其放在第三列（可能不是最干净的方法）。

问题：每当我关闭子菜单并再次单击时，它都不会打开。

Answer 1

目前看来，活动的 class 不会在第二次点击时被删除。相反，它只是清除了第三列的 HTML。我们可以通过在隐藏子菜单时添加一行来删除活动 class 来解决这个问题。

if( $(this).hasClass('active') ){
    $(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
    triggerMenu.removeClass('asg-gray-bg-200');
    $(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}

超级菜单中的 JS 切换子菜单

JS Toggle Submenu within Mega Menu

javascript

jquery

twitter-bootstrap