javascript - 切换菜单项

Question

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

在这里笔: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:我混合使用了一些 vanilla 和 jQuery。

Answer 1

(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);

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