单击时展开菜单

时间:2013-03-05 14:20:01

标签: javascript jquery html css

我的基本菜单看起来像这样。

<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。我该如何处理?

4 个答案:

答案 0 :(得分:10)

使用jQuery's .slideToggle(),同时确保.submenu不可见:

JAVASCRIPT:

$(function() {
    $('#auctions').click(function(){
      $('.submenu').slideToggle();
    });
});

CSS:

.submenu{display:none;}

DEMO:http://jsfiddle.net/dirtyd77/SLGdE/4/

答案 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"