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

如果你想切换＆＃39;关闭＆＃39;或者关闭您点击的项目，然后您就不想拨打开关＆＃39;打开＆＃39;功能再次。如果链接未打开，我只会拨打切换按钮（＆＃39;打开＆＃39;）。

  // 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');
  }

Answer 2

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

在您的codepen中使用此功能。试试看。

切换菜单项

2 个答案: