javascript - 点击展开菜单

Question

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

<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>

我希望隐藏三个子菜单，直到单击文本“拍卖”。然后它们应该出现，并在第二次单击“拍卖”时再次隐藏，依此类推。我试过这样的事情。

$(function() {
    $('#auctions').click(function() {        
        $('#menu').animate({'height': '200'});
        $('#submenu').animate({opacity : 'toggle'});
    }, function () {
        $('#menu').stop().animate({'height': '100'});
        $('#submenu').animate({opacity : 'toggle'});
    });
});

老实说，我很讨厌 jquery。我该如何处理？

Answer 1

使用jQuery 的.slideToggle()，还要确保.submenu不可见：

JAVASCRIPT：

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

CSS：

.submenu{display:none;}

演示：http: //jsfiddle.net/dirtyd77/SLGdE/4/

Answer 2

这对你有用吗？

$('#auctions').click(function(){
  $("#menu, .submenu").toggle();
});

Answer 3

您的基本结构很好，但我不会使用css(). 改为使用slideToggle()：

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

Answer 4

你为什么不使用这个代码：

    $(function() {
$('.submenu').hide();
   $('#auctions').click(function() {        
       //$('#menu').animate({'height': '200'});
       $('.submenu').toggle("slow");

});

});

除了你使用"#submenu"和在你的html中class你应该使用它".submenu"