将两级导航菜单更改为三级

Question

我正在尝试进行修改，将两级导航菜单变成三级菜单，但无法显示第三级项目。当我点击第二层时，它目前只是缩回到第一层而不显示第三层项目。我以各种方式重新安排了代码，但我无法弄清楚。任何提示将不胜感激。（在HTML、"Menu 3"、"Page 6"和"Page 7"中是我在原代码中添加的。）

JS:

 $(document).ready(function(){
 // Menu.
 var $menu = $('#menu');
    $menu_openers = $menu.children('ul').find('.opener');

// Openers.
    $menu_openers.each(function() {

        var $this = $(this);

        $this.on('click', function(event) {

            // Prevent default.
                event.preventDefault();

            // Toggle.
                $menu_openers.not($this).removeClass('active');
                $this.toggleClass('active');

            // Trigger resize (sidebar lock).
                $window.triggerHandler('resize.sidebar-lock');

        });

        });

CSS:

/* Menu */
#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #3d4449;
  font-family: "Roboto", sans-serif;
  font-family: 400;
  letter-spacing: 0.075em;
  list-style: none;
  margin-bottom: 0;
  padding: 0;
  text-transform: uppercase;
}
#menu ul a,
#menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 0.9em;
  padding: 0.625em 0;
}
#menu ul a:hover,
#menu ul span:hover {
  color: #f56a6a;
}
#menu ul a.opener,
#menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-transform: none !important;
}
#menu ul a.opener:before,
#menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0;
}
#menu ul a.opener:hover:before,
#menu ul span.opener:hover:before {
  color: #f56a6a;
}
#menu ul a.opener.active+ul,
#menu ul span.opener.active+ul {
  display: block;
}
#menu ul a.opener.active:before,
#menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg);
}
#menu>ul>li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0;
}
#menu>ul>li>ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu>ul>li>ul>ul {
  color: #9fa3a6;
  display: none;
  margin: 0.5em 0 1.5em 0;
  padding-left: 1em;
}
#menu>ul>li>ul a,
#menu>ul>li>ul span {
  font-size: 0.8em;
}
#menu>ul>li>ul>li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}
#menu>ul>li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

HTML

<nav id="menu">
  <header class="major">
    <h2>Menu</h2>
  </header>
  <ul>
    <li><a href="page1.html">Page 1</a></li>
    <li><a href="page2.html">Page 2</a></li>
    <li><a href="page3.html">Page 3</a></li>
    <li>
      <span class="opener">Menu 1</span>
      <ul>
        <li><a href="page4.html">Page 4</a></li>
        <li><a href="page5.html">Page 5</a></li>
      </ul>
    </li>
    <li>
      <span class="opener">Menu 2</span>
      <ul>
        <span class="opener">Menu 3</span>
        <ul>
          <li><a href="page6.html">Page 6</a></li>
          <li><a href="page7.html">Page 7</a></li>
        </ul>
      </ul>
    </li>
  </ul>
</nav>

Answer 1

这段代码：

$menu_openers.not($this).removeClass('active');

不起作用，因为它删除了与 $this 不同的每个元素的活动 class，但你想要做的是从 $this 的兄弟姐妹中删除活动 class。你应该改用这个：

$this.parent().siblings().children('.opener').removeClass('active');

顺便说一句，您可以只写以下内容：

$menu_openers = $menu.children('.opener');

更简单。

将两级导航菜单更改为三级

changing two-level navigation menu to three-level

javascript

css

nav