2

私は実験中であり、これについて最善の方法を見つけています。複数のドロップダウン メニューがあります。他の開いているメニューを確認して閉じ、クリックしたメニューでアニメーションを実行するか、クリックしたメニューが既に開いている場合は単に閉じようとしています。これが私がこれまでに持っているものです。

$('ul.primary li').click(function(event) {
            if ($(this).children('ul.drop').is(':visible')) {
                $(this).children('ul.drop').slideUp(function() {
                    $(this).parent('li').removeClass('active');
                });
            }
            else if ($(this).siblings().children('ul.drop').is(':visible')) {
                        $(this).siblings().children('ul.drop').slideUp(function() {
                            $(this).parent('li').removeClass('active');
                        });
                        $(this).children('ul.drop').slideDown(function() {
                            $(this).parent('li').addClass('active');
                        });
            }
            else {
                $(this).children('ul.drop').slideDown(function() {
                    $(this).parent('li').addClass('active');
                });
            }
        });

編集：クリックしたドロップダウンアニメーションが開く前に、開いているドロップダウンアニメーションを閉じる方法がわかりません。JsFiddle: http://jsfiddle.net/JG9dB/

4

1 に答える 1

1

これが私がそれについて行く方法です....

ジャバスクリプト:

$('ul.primary>li').click(function(event) {
  var li = $(this);
  var liOld = $('ul.active').parents("li");

  if($('ul.active').length!=0){
      $('ul.active').removeClass('active').slideUp('slow', function(){
        if(li.index() != liOld.index()){
           li.children('ul.drop').slideDown('slow').addClass('active');
        }
      });
  }
  else{
     $(this).children('ul.drop').slideDown('slow').addClass('active');
  }
});

デモ: http://jsfiddle.net/JG9dB/35/

これで問題は解決するはずです。他にご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-01-11T20:31:29.977 に答える