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切换按钮

回答

相关问题