jQuery 如果 hasClass 不起作用

Question

我正在努力检查元素是否具有特定的 class 并因此执行操作。我可以设法显示一个元素（但不能隐藏它），但是一旦我应用 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

试试这个:)

与其使用多个 classes，不如假设隐藏状态是菜单的默认状态。然后，您只需应用一个 class 来实际切换菜单。

希望对您有所帮助。 :)

function showMenu() {
  $('#menu').toggleClass('show');
}

$('a').on('click', function() {
  showMenu();
});

#menu {
  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;
}

#menu.show {
  opacity: 1;
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="">Open Menu</a>

<div id="menu">HI, MENU HERE</div>

Answer 2

您的代码中的问题来自条件，您没有使用 else 语句，因此如果您的元素具有 class hidemenu``and the class will be changed two times, the first condition will add the classshowmenu[=14，则这两个条件都会触发=]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');
});

希望这对您有所帮助。

Answer 3

您的逻辑存在问题是因为您有两个单独的 if 语句。第一个添加 showmenu class 如果它不在元素上。第二个然后检测到您刚刚添加的 class 现在在元素上并再次将其删除。最终结果是什么都没有发生。

要解决此问题，请将逻辑加入到单个 if/else 语句中，或者更好的是，使用 toggleClass()，如下所示：

$('a').click(function(e) {
  e.preventDefault();
  $('#sidebar-menu').toggleClass('hidemenu showmenu');
});

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" title="">Open Menu</a>

<div id="sidebar-menu" class="hidemenu">
  Menu goes here...
</div>

注意使用不显眼的事件处理程序，并且仅指定 opacity CSS 属性进行动画处理而不是提供 all.

Answer 4

使用 toggleClass

更简洁的代码

$('button').mouseover(function() {
 $('#menu').toggleClass('hide');
});

.hide { 
 display:none
}

<button>mouse over</button>
<div class='hide' id='menu'>Menu</div>
<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>

jQuery 如果 hasClass 不起作用

jQuery if hasClass does not work

html

css

jquery

toggle