0

これに似たHTML構造を使用しています

<ul class="top-level">
   <li><a href="#"></a>
       <ul class="dropdown">
          <li><a href="#"></a>
          </li>
       <ul>
   <li>
</ul>

このようなjQueryで

$(".top-level").on("click", "a", function() {
  $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

ただし、あるリンクをクリックしてドロップダウンを表示した後、別のトップレベル リンクをクリックして別のドロップダウンを表示しても、最初のドロップダウンは消えません。必要なものを除いて .dropdown の他のすべての要素を選択し、それらを非表示にするように依頼する方法はありますか?

前もって感謝します

4

3 に答える 3

1 
$(".top-level").on("click", "a", function() {
  var theDrop = $(this).next("ul.dropdown"); //convert dropdown in question to var
  theDropState = theDrop.is(':visible'); //record current state of dropdown
  $("ul.dropdown").hide(); //hide all dropdowns
  if(!theDropState){ theDrop.show(); } //if state was invisible, show dropdown
});

このメソッドはステートレスであり、毎回正しい条件を設定します。トグルを使用すると$('ul.dropdown').toggle();、すべてのドロップダウンが一度に表示されるなどのリスクがあります。

于 2012-06-05T04:57:15.010 に答える
0

のように使う

$(".top-level").on("click", "a", function(e) {
  e.preventDefault();
  $('ul.dropdown').hide(); 
  $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

すでに開いているドロップダウンをクリックすると、最初に非表示になり、次に再び表示されます。それを避けるために、次のように変更します

$(".top-level").on("click", "a", function(e) {
    e.preventDefault();
    if($(this).next("ul.dropdown").is('visible'))
      return;
    // as the target drop down is already visible do nothing and return      
    $('ul.dropdown').hide(); 
    $(this).next("ul.dropdown").toggle(); 
         // Show / hide the corresponding sub-menu
});
于 2012-06-05T04:52:35.920 に答える
-1

最初に、表示されているドロップダウン リストを非表示にすることができます。次に、現在クリックしていることを表示します。

$(".top-level").on("click", "a", function() {
     $('ul.dropdown').fadeOut(100); //hide any visible drop down first
     $(this).next("ul.dropdown").toggle(); // Show / hide the corresponding sub-menu
});

それがあなたの望むものであることを願っています。

于 2012-06-05T04:57:21.203 に答える