切换菜单项

Toggle menu items

本文关键字：菜单项      更新时间：2023-09-26

我想在单击菜单项时切换菜单项上的类，以显示附加的子菜单。我需要在单击一个项目开/关时进行切换，但当您单击另一个菜单项时，它需要自行切换并关闭已经打开的菜单项。

笔在这里：http://codepen.io/saltcod/pen/rxZwBZ?editors=1100

 ( function( window, $ ) {
'use strict';
var primaryNavLinks = document.querySelectorAll('.primary-navigation > .menu > li > a');
_.each( primaryNavLinks, function( primaryNavLink ) {
    // add event listener to each menu item
    primaryNavLink.addEventListener( 'click', function() {
        // if one already has class 'open', remove it
        if ($(primaryNavLinks).hasClass('open') ) {
            $( primaryNavLinks ).removeClass('open');
        }
        // toggle 'open' on the one that we've clicked
        $(this).toggleClass('open');
    });
});
} )( this, jQuery );
<nav class="primary-navigation" role="navigation">
<ul class="menu">
    <li>
          <a href="#">News</a>
              <div class="sub-menu">
                  <div class="wrapper">
                        <ul>
                              <li><a href="#">All News</a></li>
                                <li><a href="#">This other news</a></li>
                                <li><a href="#">More news</a></li>
                        </ul>
                </div>
            </div>
      </li>
      <li><a href="#">Weather</a></li>
      <li><a href="#">Sports</a></li>
      <li><a href="#">Live</a></li>
</ul>

它现在工作了 99% — 当我单击一个项目时，它会打开，当我单击另一个项目时，它会打开那个项目。 不起作用的部分是当我单击一个项目时，它不会自行关闭。

谢谢！

ps：我使用的是香草和jQuery的混合。 

(function(window, $) {
  'use strict';
  var primaryNavLinks = $('.primary-navigation .menu li a');
  primaryNavLinks.click(function(e) {
    e.preventDefault();
    if( $(this).hasClass('open') ) {
       primaryNavLinks.removeClass('open');
    }else{
      primaryNavLinks.removeClass('open');
      $(this).addClass('open');
    }
 });
})(this, jQuery);

在你的代码笔中让它工作。试一试。

如果要

切换"关闭"或关闭单击的项目，则不想再次调用切换"打开"功能。 下面我只在链接未打开的情况下调用切换（'打开'）。

  // if one already has class 'open', remove it
  if ($(primaryNavLinks).hasClass('open')) {
      $(primaryNavLinks).removeClass('open');
  } else {
      // toggle 'open' on the one that we've clicked
      $(this).toggleClass('open');
  }
相关文章：