1

このような基本的なメニューがあります。

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

「オークション」というテキストがクリックされるまで、3 つのサブメニューを非表示にします。その後、それらは表示されるはずで、「オークション」が 2 回目にクリックされると再び非表示になります。私はこのようなことを試しました。

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

正直なところ、私はjqueryが苦手です。どうすればこれにアプローチできますか?

4

4 に答える 4

10

jQuery の.slideToggle()を使用し、 が表示されていないことも確認し.submenuます。

ジャバスクリプト:

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

CSS:

.submenu{display:none;}

デモ: http://jsfiddle.net/dirtyd77/SLGdE/4/

于 2013-03-05T14:25:40.880 に答える
0

これはあなたのために働きますか？

$('#auctions').click(function(){
  $("#menu, .submenu").toggle();
});
于 2013-03-05T14:23:39.427 に答える
0

このコードを使用しない理由:

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

});

});

あなたが使用するものとは別に"#submenu"、あなたのhtmlclassで使用する必要があります".submenu"

于 2013-03-05T14:29:43.810 に答える
0

あなたの基本的な構造は問題ありませんが、私は使用しませんcss()。slideToggle()代わりに使用します。

$(function() {
    $('#auctions').click(function() {        
        $('.submenu').slideToggle();
    });
});
于 2013-03-05T14:26:09.873 に答える