我的基本菜单看起来像这样。
<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>
我希望隐藏三个子菜单,直到单击“Auctions”文本为止。然后他们应该出现,并在第二次点击“拍卖”时再次隐藏,依此类推。我尝试过这样的事情。
$(function() {
$('#auctions').click(function() {
$('#menu').animate({'height': '200'});
$('#submenu').animate({opacity : 'toggle'});
}, function () {
$('#menu').stop().animate({'height': '100'});
$('#submenu').animate({opacity : 'toggle'});
});
});
老实说,我很讨厌jquery。我该如何处理?
答案 0 :(得分:10)
使用jQuery's .slideToggle()
,同时确保.submenu
不可见:
JAVASCRIPT:
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
CSS:
.submenu{display:none;}
答案 1 :(得分:0)
这对你有用吗?
$('#auctions').click(function(){
$("#menu, .submenu").toggle();
});
答案 2 :(得分:0)
您的基本结构很好,但我不会使用css()
。请改用slideToggle()
:
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});
答案 3 :(得分:0)
为什么不使用这段代码:
$(function() {
$('.submenu').hide();
$('#auctions').click(function() {
//$('#menu').animate({'height': '200'});
$('.submenu').toggle("slow");
});
});
除了您使用"#submenu"
之外,在您的html class
中,您应该使用".submenu"