Question

请帮忙!!!!我要包含一个页面的链接，其中包含我想要用于我正在构建的网站的菜单。在点击导航中的链接后，我似乎无法弄清楚如何让“.menu-outer”重新定位。我已经尝试了各种代码组合但没有可用。任何人都可以提供帮助吗？

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

谢谢

Answer 1

你从来没有提到过使用Javascript，但是这里有一个版本用它关闭菜单一次并单击项目（注意：从网址下面稍微改变一下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

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

1 个答案: