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>
I'm new to JQuery, so please bear with me =)
I have a "Menu" button that should "slide down" a menu.
My problem is that the menu is visible from the start, I want it to be hidden at first and then when clicking on the "Menu" button, should the menu "slide down" and then "slide up" again after pressing the "Menu" button again.
My HTML:
<div id="moduleMenuBtn" class="moduleMenuBtn">Menu</div>
<div id="effect">Some Content</div>
My JS code:
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您可以添加一些 CSS 来最初隐藏它，如下所示：
或内联，如下所示：
You can just add some CSS to hide it initially, like this:
Or inline, like this:
只需在 css 中的 #slide 元素上使用
display:none;或visibility:hidden;即可。或者将$('#slide').hide();放在 javascript 的开头。另外，如果您想向上/向下滑动，jQuery 有本机函数
slideUp()、slideDown()和slideToggle()。请参阅 jQuery 文档。Just use
display:none;orvisibility:hidden;on the #slide element in css. Or put$('#slide').hide();at the beginning of javascript.Also if you want to slide up/down, jQuery has native functions
slideUp(),slideDown()andslideToggle(). See jQuery documentation.