Question

我正在研究website。

以下是左侧边栏上菜单触发器的代码：

jQuery(document).ready( function(){
  jQuery('.nav-animate nav').hide('slide', 500);
  jQuery('.nav-animate').hide();

 jQuery(".x-btn-navbar").click(function(){
  jQuery('#dimmer').fadeToggle(500);
  jQuery('.nav-animate').fadeToggle(500);
  jQuery('.nav-animate nav').toggle('slide', {direction: "left"}, 750);

// I am trying to show only the middle line when the navigation is closed 
// and change the `.menu-p` text by checking whether the navigation has
// display:none or display:block, like this:

  if(jQuery(".nav-animate").is(":visible")) {
    jQuery("span.line.top").css('background-color', '#fff');
    jQuery('span.line.bottom').css('background-color', '#fff');
    jQuery('.menu-p').html('CLOSE')
  }

// The above part works perfectly, however the part below doesn't:

  if(!jQuery(".nav-animate").is(':visible')) {
    alert('hidden');
    jQuery('span.line.top').css('background-color', '#262628');
    jQuery('span.line.bottom').css('background-color', '#262628');
    jQuery('.menu-p').html('MENU');
  }
 });
});

我尝试使用if(jQuery(".nav-animate").is(":hidden")) {//...}和if(jQuery(".nav-animate").css('display') == 'none') {//...}，但两者都不起作用。

我的猜测是，当您点击“关闭”时，它会执行:visible或:hidden检查，但菜单仍然在您点击时打开，因此它仍然没有{{ 1}}直到click事件执行该操作。在那种情况下，我该怎么办？

提前感谢您的时间和建议。

Answer 1

动画相关方法会影响可见性检查，因此请在调用切换之前检查状态

jQuery(document).ready(function () {
    jQuery('.nav-animate nav').hide('slide', 500);
    jQuery('.nav-animate').hide();

    jQuery(".x-btn-navbar").click(function () {
        jQuery('#dimmer').fadeToggle(500);
        //negate since fadetoggle will toggle the state
        var visible = !jQuery('.nav-animate').stop().is(':visible');
        jQuery('.nav-animate').fadeToggle(500);
        jQuery('.nav-animate nav').toggle('slide', {
            direction: "left"
        }, 750);

        // I am trying to show only the middle line when the navigation is closed 
        // and change the `.menu-p` text by checking whether the navigation has
        // display:none or display:block, like this:

        if (visible) {
            jQuery("span.line.top").css('background-color', '#fff');
            jQuery('span.line.bottom').css('background-color', '#fff');
            jQuery('.menu-p').html('CLOSE')
        } else {
            // The above part works perfectly, however the part below doesn't:
            alert('hidden');
            jQuery('span.line.top').css('background-color', '#262628');
            jQuery('span.line.bottom').css('background-color', '#262628');
            jQuery('.menu-p').html('MENU');
        }
    });
});

Answer 2

只需在你的阻止条件正确的情况下添加条件。如果第一个条件阻止不正确，则会运行它的意思。

if(!jQuery('.nav-animate').stop().is(':visible')) {
    jQuery("span.line.top").css('background-color', '#fff');
    jQuery('span.line.bottom').css('background-color', '#fff');
    jQuery('.menu-p').html('CLOSE')
  }

 else{
 // to do

}

jQuery：可见工作但是：隐藏没有

2 个答案: