私は何年もの間、これを理解しようとしてきました。基本的に私にはメニューがあり、ユーザーが矢印をクリックすると、下のドロップダウンをスライドさせます。
いろいろやってみたいですね。
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 を見ることができます。うまくいけば、もう少し良くなることを示しています (赤いボックスはクリック可能な領域です)。
編集: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);
});