html - jQuery 如果 hasClass 不起作用

Question

我正在努力检查元素是否具有特定类并因此执行操作。我可以设法显示一个元素(但不能隐藏它)，但是一旦我应用 IF 语句，它就不再起作用了。

作品:

function showmenu() {
  $('#sidebar-menu').removeClass('hidemenu');
  $('#sidebar-menu').addClass('showmenu');
}

不起作用:

function showmenu() {
  if ($('#sidebar-menu').hasClass('hidemenu')) {
    $('#sidebar-menu').removeClass('hidemenu');
    $('#sidebar-menu').addClass('showmenu');
  }

  if ($('#sidebar-menu').hasClass('showmenu')) {
    $('#sidebar-menu').removeClass('showmenu');
    $('#sidebar-menu').addClass('hidemenu');
  }
}

.hidemenu {
  opacity: 0;
  visibility: hidden;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

.showmenu {
  opacity: 1;
  visibility: visible;
  transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="" onclick="return false" onmousedown="javascript:showmenu();">Open Menu</a>

Answer 1

您的代码中的问题来自条件，您没有使用 else 语句，因此如果您的元素具有类 hidemenu`` 并且类将被更改，则这两个条件都会触发两次，第一个条件将添加类showmenu，第二个条件将删除它，因此请将else` 添加到您的逻辑中:

function showmenu() {
    if($('#sidebar-menu').hasClass('hidemenu')){
        $('#sidebar-menu').removeClass('hidemenu');
        $('#sidebar-menu').addClass('showmenu');
    } else if($('#sidebar-menu').hasClass('showmenu')){
        $('#sidebar-menu').removeClass('showmenu');
        $('#sidebar-menu').addClass('hidemenu');
    } // end if has class
} // end function

注意: 有效的方法是使用 toggleClass() :

$('a').click( function(e) {
    e.preventDefault(); //Prevent the default action

    $('#sidebar-menu').toggleClass('hidemenu showmenu');
});

希望这对您有所帮助。