0

この jQuery スニペットは、メニュー リンクがクリックされたときにサブメニュー項目を表示または非表示にします。

jQuery(document).ready(function($) {

$('.main-navigation ul li a').click(function() {
   var li = $(this).closest('li');
   if(li.has('ul'))
        li.find('ul').toggle(100);
});

});

「トグル」ではなく「アニメーション」で同様の効果を得るにはどうすればよいですか?

ご提案いただきありがとうございます。

4

3 に答える 3

1

おそらく、slide*() トランジションを使用したものですか?

   $('ul li a').click(function () {
    var li = $(this).closest('li');
    var ul;
    if (li.has('ul')) {
       ul = li.find('ul').slideToggle('slow');  // SlideToggle this to slideUp/down based on current state.
     }
        $('ul.subMenu:visible').not(ul).slideUp('slow');//slideUp all other menus

    });

フィドル

于 2013-05-21T16:29:56.397 に答える
1

次のようないくつかの事前定義されたトグルを使用できます

.slideToggle()と.fadeToggle()

または、この方法を使用してアニメーションを切り替えることができます

$('.main-navigation ul li a').toggle(
function()
{
  $('#something').animate({
    height: "100"
  }, 500);
},
function()
{
  $('#something').animate({
    height: "200"
  }, 500);
});

.toggle()with 2 ハンドラは非推奨であるため

これがあなたがすべき方法です

var toggle = false;

$('#foo').click(function() {
  if (toggle) {
    $("#bar").hide();
  } else {
    $("#bar").show();
  }
  toggle = !toggle;
});

ここでは、jsfiddle http://jsfiddle.net/BwKc9/1/に実際の例があります

于 2013-05-21T16:20:01.370 に答える