Question

所以我发现这个jquery为我的网站切换移动菜单，我编辑了一下。当我完成编辑后，我意识到当我点击 x 关闭它时，它并没有关闭。我尝试了一切，但似乎无法解决问题。有人可以帮忙吗？这是JSFiddle

HTML：

<a href="#menu" id="toggle"><span></span></a>
<div id="menu">
<ul>
<li><a href="#home">News</a></li>
<li><a href="#about">Biografia</a></li>
<li><a href="#contact">Zara Larsson Italia</a></li>
<li><a href="#contact">Contattaci</a></li>
<li><a href="#contact">Facebook</a></li>
<li><a href="#contact">Twitter</a></li>
</ul>
</div>

CSS：

#toggle {
  display: block;
  width: 28px;
  height: 30px;
    position:fixed;
    top:35px;
    left:30px; 
}

#toggle span:after,
#toggle span:before {
  content: "";
  position: absolute;
  left: 0;
  top: -9px;
}
#toggle span:after{
  top: 9px;
}
#toggle span {
  position: relative;
  display: block;
}

#toggle span,
#toggle span:after,
#toggle span:before {
  width: 100%;
  height: 4px;
  background-color: #000;
  transition: all 0.3s;
  backface-visibility: hidden;
  border-radius: 0px;
}

/* on activation */
#toggle.on span {
  background-color: transparent;
}
#toggle.on span:before {
  transform: rotate(45deg) translate(5px, 5px);
}
#toggle.on span:after {
  transform: rotate(-45deg) translate(7px, -8px);
}
#toggle.on + #menu {
  opacity: 1;
  visibility: visible;
}

/* menu appearance*/
#menu {
  position: absolute;
  color: #999;
  width: 100%;
  margin: auto;
  text-align: center;
  background: white;
  /* just for this demo */
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s;
    margin-top:75px;
    font-weight:700;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
}
#menu:after {
  position: absolute;
  top: -15px;
  left: 95px;
  content: "";
  display: block;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}
#menu ul, #menu li, #menu li a {
  list-style: none;
  display: block;
  margin: 0;
  padding: 0;
}
#menu li a {
  padding: 15px;
  color: #888;
  text-decoration: none;
  font-weight:700;
    text-decoration:none;
    text-transform:uppercase;
    color: #000;
}
#menu li a:hover,
#menu li a:focus {
  background: #000;
  color: #fff;

}

使用Javascript：

var theToggle = document.getElementById('toggle');
function hasClass(elem, className) {
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' ');
}
function addClass(elem, className) {
    if (!hasClass(elem, className)) {
        elem.className += ' ' + className;
    }
}
function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0) {
            if (window.CP.shouldStopExecution(1)) {
                break;
            }
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
        window.CP.exitedLoop(1);
    }
}
function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0) {
            if (window.CP.shouldStopExecution(2)) {
                break;
            }
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
        window.CP.exitedLoop(2);
    } else {
        elem.className += ' ' + className;
    }
}
theToggle.addEventListener("click", function(){
   toggleClass(this, 'on');
   return false;
});

Answer 1

使用此功能切换className：

function toggleClass(elem, className) {
    var classes = elem.className.split(' ');
    var i = classes.indexOf(className);
    if(i == -1)
        classes.push(className);
    else
        classes.splice(i,1);
    elem.className = classes.join(' ');
}

但是，您只需在$(this).toggleClass('on')中使用jQuery。

jQuery切换菜单不起作用

1 个答案: