1

私は何年もの間、これを理解しようとしてきました。基本的に私にはメニューがあり、ユーザーが矢印をクリックすると、下のドロップダウンをスライドさせます。

いろいろやってみたいですね。

1) ユーザーが矢印のドロップダウンをクリックして下にスライドすると、もう一度矢印をクリックしてドロップダウン メニューを上にスライドできるようにしたいと思います。

2) ユーザーが別の矢印ドロップダウンをクリックすると、最初のドロップダウンが消えてから、新しいドロップダウンが表示されます。

これは私がこれまでに持っているものです。ポイント2とは別に機能しています。

$('nav li i').click(function() {  
    $('nav li i.open').find('.dropdown').not($(this)).slideToggle(300);
    $('nav li').find('.open').not($(this)).removeClass('open');    
    $(this).toggleClass('open');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

ここで jsfiddle を見ることができます。うまくいけば、もう少し良くなることを示しています (赤いボックスはクリック可能な領域です)。

http://jsfiddle.net/c8kHN/1/

編集:2番目のポイントを機能させることができました(ユーザーが別のポイントをクリックすると、最初のドロップダウンが消えます)-ただし、最初のポイントが壊れます。

$('nav li i').click(function() {  
    $('nav li.open').not($(this)).find('.dropdown').hide();
    $('nav').find('.open').not($(this)).removeClass('open');    
    $(this).parent('nav li').toggleClass('open');
    $(this).parent('nav li').find('.dropdown').slideToggle(300);
});

http://jsfiddle.net/c8kHN/7/

4

2 に答える 2