JQuery切換按鈕

我是JQuery新手，所以請耐心等待我=）JQuery切換按鈕

我有一個「菜單」按鈕，應該「下滑」菜單。

我的問題是菜單從一開始就是可見的，我希望它首先被隱藏，然後當點擊「菜單」按鈕時，菜單應該「滑下」，然後再「向上滑動」再次按下「菜單」按鈕。

我的HTML：

<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div> 
<div id="effect">Some Content</div>

我的JS代碼：

<script type="text/javascript"> 

    $(function() { 
     function runEffect(){ 
      var selectedEffect = $('#slide').val(); 
      var options = {}; 
      if(selectedEffect == 'scale'){ options = {percent: 0}; } 
      else if(selectedEffect == 'size'){ options = { to: {width: 200,height: 60} }; } 
      $("#effect").toggle(selectedEffect,options,500); 
     }; 

     $("#moduleMenuBtn").click(function() { 
      runEffect(); 
      return false; 
     }); 
    }); 
</script>

來源

2010-08-16 Erik Lydecker

您可以只需添加一些CSS最初隱藏它，就像這樣：

#effect { display: none; }

或內聯，如這個：

<div id="effect" style="display: none;">Some Content</div>

來源

2010-08-16 16:26:29

真棒和容易！愛兄弟！ – 2010-08-16 16:38:11

我無法讓我的「幻燈片」效果起作用？看到我的上面的代碼。謝謝！ – 2010-08-16 18:25:47

@Erik - 你包括jQuery UI嗎？ – 2010-08-16 20:24:46

只需在css中的#slide元素上使用display:none;或visibility:hidden;即可。或者在JavaScript的開頭放置$('#slide').hide();。

此外，如果你想向上/向下滑動，jQuery的本地功能slideUp(),slideDown()和slideToggle()。請參閱jQuery documentation。

來源

2010-08-16 16:29:57 Smaug

非常感謝！正如我所說我是新來的JQuery和我可以看到沒有「幻燈片」效果我的菜單=（我在哪裏可以添加到我當前的JS代碼？謝謝！ – 2010-08-16 16:39:21

JQuery切換按鈕

回答

相關問題