Question

我有此菜单响应，此菜单适用于单个页面，包含各种内容。使用我拥有的代码，当我点击li（链接）它没有关闭或隐藏时，我想让它在有人点击它时关闭或隐藏。感谢帮助。

/* Helper functions */
function _hasClass(elem, className) {
  return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}

function _toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (_hasClass(elem, className)) {
      while (newClass.indexOf(' ' + className + ' ') >= 0) {
        newClass = newClass.replace(' ' + className + ' ', ' ');
      }
      elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
      elem.className += ' ' + className;
    }
  }
  /* ResponsiveMenu Class constructor */

function ResponsiveMenu(settings) {
  if (!settings) return;

  this.nav = document.getElementsByClassName(settings.navClass)[0];
  this.mobile = settings.mobileClass;
  this.toggle = document.getElementsByClassName(settings.toggleClass)[0];
  this.innerToggle = settings.innerToggle ? document.getElementsByClassName(settings.innerToggle) : false;

  this.navOpen = settings.navOpen || 'nav-mobile-open';
  this.toggleActive = settings.toggleActive || 'nav-active';
  this.innerToggleActive = settings.innerToggleActive || 'nav-active-inner';

  this.jQuery = (window.jQuery) ? jQuery : false;

  this.init();
}
ResponsiveMenu.prototype.createMenu = function() {
  this.mobileElem = document.createElement('div');
  this.mobileElem.className = this.mobile;
  this.nav.appendChild(this.mobileElem);
};
ResponsiveMenu.prototype.bindHandlers = function() {
  var _self = this;
  var piece = void 0;

  this.mobileElem.addEventListener('click', function() {
    if (_self.jQuery) {
      _self.jQuery(_self.toggle).slideToggle(function() {
        _self.jQuery(this).attr('style', '');
        _toggleClass(this, _self.navOpen);
        _toggleClass(_self.toggle, _self.toggleActive);
      });
    } else {
      _toggleClass(this, _self.navOpen);
      _toggleClass(_self.toggle, _self.toggleActive);
    }
  });

  if (this.innerToggle && !this.jQuery) {
    for (piece in this.innerToggle) {
      if (!isNaN(parseInt(piece))) {
        this.innerToggle[piece].addEventListener('click', function() {
          _toggleClass(this, _self.innerToggleActive);
        });
      }
    }
  }

  if (this.jQuery) {
    this.jQuery(this.innerToggle).on({
      click: function() {
        var trigger = this;
        var menu = jQuery(this).find('ul');
        menu.slideToggle(function() {
          _toggleClass(trigger, _self.innerToggleActive);
        });
      }
    });
  }
};
ResponsiveMenu.prototype.init = function() {
  this.createMenu();
  this.bindHandlers();
};


(function() {
  var r_menu = new ResponsiveMenu({
    navClass: 'nav', // Main navigation container => CSS Selector
    mobileClass: 'nav-mobile', // Class for the mobile navigation trigger to create and append => not a Selector
    toggleClass: 'nav-list', // Class of the navigation list (the <ul> for example) => CSS Selector
    innerToggle: 'has-inner', // Class of inner toggle elements => CSS Selector, parents of sub elements
    innerToggleClass: 'nav-inner', // Class for inner navigation => CSS Selector

    /* Open State */
    navOpen: 'nav-mobile-open',
    toggleActive: 'nav-active',
    innerToggleActive: 'nav-active-inner'
  });
})();

<div class="header_bg">
  <div class="wrap">
    <div class="header">
      <div class="logo">
        <h1><a href="index.html"><img src="images/logo.png" alt=""/></a></h1>
      </div>
      <div class="h_right">
        <ul class="menu">
          <li><a href="#home">Inicio</a>
          </li>
          <li><a href="#empresa" class="scroll">Empresa</a>
          </li>
          <li><a href="#cartadecolores" class="scroll">Carta de Colores</a>
          </li>
          <li><a href="#galeria" class="scroll">Trabajos realizados</a>
          </li>
          <li class="last"><a href="#contact" class="scroll">Presupuesto</a>
          </li>
        </ul>

        <!-- start smart_nav * -->
        <nav class="nav">
          <ul class="nav-list">
            <li class="nav-item"><a href="#home">Inicio</a>
            </li>
            <li class="nav-item"><a href="#empresa" class="scroll">Empresa</a>
            </li>
            <li class="nav-item"><a href="#cartadecolores" class="scroll">Carta de Colores</a>
            </li>
            <li class="nav-item"><a href="#galeria" class="scroll">Trabajos realizados</a>
            </li>
            <li class="nav-item"><a href="#contact" class="scroll">Presupuesto</a>
            </li>
            <div class="clear"></div>
          </ul>
        </nav>
        <script type="text/javascript" src="js/responsive.menu.js"></script>
        <!-- end smart_nav * -->
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>

Answer 1

您可以使用下面的jQuery在public class MobScene { private HashMap<Integer, Integer> mobs = new HashMap<Integer, Integer>(10); // Note that '10' is the initial capacity of the Collection. // I only use it as I already know the given capacity and avoid extra memory being reserved. public MobScene() { mobs.put(9300127,2); mobs.put(9300128,2); mobs.put(9300129,2); mobs.put(9300130,3); mobs.put(9300131,3); mobs.put(9300132,3); mobs.put(9300133,4); mobs.put(9300134,4); mobs.put(9300135,5); mobs.put(9300136,6); } public void addPoints(int mobid) { if(mobs.contains(mobid)) { mobs.put(mobs.get(mobid) + 1); } } }（您的.nav-item项目的类别）上注册点击时隐藏菜单。

li

JSFIDDLE

我有这个菜单响应，我希望它点击li时关闭（点击链接时关闭）

1 个答案: