jQuery切換不保持打開

試圖切換div來展開和收縮，它基本上是一個菜單，帶有subnav。所以我最初設置高度爲48px隱藏subnav和萬一沒有JS它仍然看起來像樣，然後我分配一個開關打開和關閉div（在這種情況下設置高度）jQuery切換不保持打開

它保持清爽，自動打開div。不想保持開放，只是擴大，發出警報，然後再關閉。

jQuery(document).ready(function($) { 
$('#nav-wrapper').css('height','48px'); 
    $('#menu-item-18').click(function() { 
    var open = false; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     var isOpen = false; 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     isOpen = !isOpen; 
     alert ('open') 
    }; 
    }); 
});

可能會超過這一點。我相信也有一個更簡單的解決方案。

來源

2012-04-19 Lukasz

'isOpen'沒有在這裏定義...所以它總是會在返回false的if語句 – 2012-04-19 19:08:16

我們能不能看到你爲這個HTML？謝謝！ – jasonmerino 2012-04-19 19:09:59

哦，廢話，我打開，而不是isOpen ....傻我。 – Lukasz 2012-04-19 19:50:43

isOpen在本地範圍內定義，因此該值將始終爲false。您需要將其移至點擊處理程序之外，然後您只需要isOpen = !isOpen;即可切換值。見下文，

$('#nav-wrapper').css('height','48px'); 
    var isOpen = false; 

    $('#menu-item-18').click(function() { 
    isOpen = !isOpen; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     alert ('open') 
    }; 
    });

來源

2012-04-19 19:05:07

保持返回「不打開」，並仍然像我的其他腳本刷新回原始狀態:( – Lukasz 2012-04-19 19:47:55

@Lukasz理想情況下，它不應該。你在哪裏有這個代碼？你可以設置一個[jsFiddle]（http：// jsfiddle .net /）的這個？ – 2012-04-19 19:52:47

http://jsfiddle.net/cZhvC/2/ – Lukasz 2012-04-19 19:59:38

這應該工作（和處理多個元素以及）

$('#menu-item-18').click(function() { 
    var isOpen = $(this).is('.open'); 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0); 
     $(this).removeClass('open'); 
     alert ('not open'); 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0); 
     $(this).addClass('open'); 
     alert ('open') ; 
    }; 
});

來源

2012-04-19 19:08:45

沒有任何變量，這是更簡單的方法我能想到的的使用;

$('#menu-item-18').click(function() { 
if($(this).hasClass("active")) { 
    $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
    $(this).removeClass("active"); 
} else { 
    $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
    $(this).addClass("active"); 
} 
});

來源

2012-04-19 19:09:07 Diabolic

尼斯和容易

$('#menu-item-18').click(function() { 
    $('#nav-wrapper').slideToggle(200, //speed in ms 
     function() { 
     //callback (runs after shown or hidden) 
     $(this).is(':visible'); //Returns true if not hidden false if hidden 
     } 
    );  
});

來源

2012-04-19 19:09:17

Oh snap ... slideToggle jQuery UI only？ – 2012-04-19 19:28:01

希望我能做到這一點，我使用wordpress，它有UL爲subnav嵌套的UL和背景擴展跨越兩個，但設置在一個容器div：/ – Lukasz 2012-04-19 19:35:41

nope不僅jQuery，UI有更多的緩動選項，雖然http://api.jquery.com/slideToggle/ – Lukasz 2012-04-19 19:49:37

jQuery切換不保持打開

回答

相關問題