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

试试这个：）

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

希望这会对你有所帮助。：）

＆＃13;

function showMenu() {
  $('#menu').toggleClass('show');
}

$('a').on('click', function() {
  showMenu();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您的代码中的问题来自条件，您没有使用else语句，因此如果您的元素具有类hidemenu``and the class will be changed two times, the first condition will add the class showmenu and the second condition will remove it, so please add the 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类，如果它不在元素上。然后第二个检测到您刚添加的类现在在元素上并再次删除它。最终结果是似乎没有任何事情发生。

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 4

使用toggleClass

更清晰的代码

＆＃13;

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

＆＃13;

.hide {	
	display:none
}

＆＃13;

<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>

＆＃13;

jQuery如果hasClass不起作用

4 个答案: