单击导航链接后，CSS 侧边菜单不会返回到原始状态

Question

求助!!!我包括一个指向带有菜单的页面的链接，我想将其用于我正在构建的网站。单击导航中的链接后，我似乎无法弄清楚如何让“.menu-outer”重新定位。我已经尝试了各种代码组合，但没有可用。谁能提供帮助？

http://cssdeck.com/labs/css-side-menu

菜单具有悬停效果，可前后移动菜单，但我还希望链接允许菜单在单击页面链接后缩回。

谢谢

Answer 1

您从未提到过使用 Javascript，但这里有一个使用它来关闭菜单并单击元素的版本(注意:从下面的 url 对 css 稍作更改):

var menu = document.querySelector('.menu-outer');
var links = document.querySelectorAll('nav ul li a');

var addClass = function(element, className) {
  if (element.classList) {
    element.classList.add(className);
  } else {
    removeClass(element, className);
    element.className = (element.className + ' ' + className).replace(/^\s/, '');
  }
};

var removeClass = function(element, className) {
  if (className.indexOf('*') !== -1) {
    var aryClasses = element.className.split(' ');

    for (var i = 0; i < aryClasses.length; i++) {
      if (aryClasses[i].indexOf(className.replace('*', '')) !== -1) {
        element.removeClass(aryClasses[i]);
      }
    }
  } else {
    if (element.classList) {
      element.classList.remove(className);
    } else {
      element.className = element.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
    }
  }
};

var open = function() {
  console.log('opening');
  addClass(menu, 'active');
};

var close = function() {
  console.log('closing');
  removeClass(menu, 'active');
};

if (menu) {
  menu.addEventListener('mouseover', open, false);
  menu.addEventListener('mouseout', close, false);

  for (var l = 0; l < links.length; l++) {
    var link = links[l];
    link.addEventListener('click', close, false);
  }
}

jQuery 会是这样的:

$('body').on('click', 'nav ul li a', function() {
  $('.menu-outer').removeClass('active');
});

$('body').on('mouseover', '.menu-outer', function() {
  $(this).addClass('active');
});

$('body').on('mouseout', '.menu-outer', function() {
  $(this).removeClass('active');
});

http://cssdeck.com/labs/x0lpogde