javascript 单击时扩展菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15226140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expanding menu on click
提问by Simon Carlson
I have a basic menu looking something like this.
我有一个看起来像这样的基本菜单。
<ul id="menu">
<li id="auctions">Auctions</li>
<li class="submenu">Submenu 1</li>
<li class="submenu">Submenu 2</li>
<li class="submenu">Submenu 3</li>
</ul>
I want the three submenus to be hidden until the text "Auctions" is clicked. Then they're supposed to appear, and become hidden again when "Auctions" is clicked a second time and so on. Ive tried something like this.
我希望在单击文本“拍卖”之前隐藏三个子菜单。然后它们应该出现，并在第二次单击“拍卖”时再次隐藏，依此类推。我试过这样的事情。
$(function() {
$('#auctions').click(function() {
$('#menu').animate({'height': '200'});
$('#submenu').animate({opacity : 'toggle'});
}, function () {
$('#menu').stop().animate({'height': '100'});
$('#submenu').animate({opacity : 'toggle'});
});
});
In all honesty I suck at jquery. How do I approach this?
老实说，我很讨厌 jquery。我该如何处理？
回答by Dom
Use jQuery's .slideToggle(), also make sure .submenuis not visible:
使用jQuery 的.slideToggle()，还要确保.submenu不可见：
JAVASCRIPT:
爪哇脚本：
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
CSS:
CSS：
.submenu{display:none;}
回答by ant
Does this work for you?
这对你有用吗？
$('#auctions').click(function(){
$("#menu, .submenu").toggle();
});
回答by s.lenders
Your basic structure is fine, yet i wouldn't use css(). Use slideToggle()in stead:
你的基本结构很好，但我不会使用css(). slideToggle()改为使用：
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
回答by supersaiyan
why dont you use this code :
你为什么不使用这个代码：
$(function() {
$('.submenu').hide();
$('#auctions').click(function() {
//$('#menu').animate({'height': '200'});
$('.submenu').toggle("slow");
});
});
apart from that you use "#submenu"and in your html its classyou should use ".submenu"
除了你使用的"#submenu"，在你的 html 中class你应该使用它".submenu"
