下拉菜單點擊切換

我正在嘗試創建一個下拉菜單，它在點擊而不是懸停時激活。到目前爲止，我點擊工作一點點的JavaScript，但雖然子菜單顯示良好，如果另一個菜單被點擊其他子菜單隱藏，我不知道如何隱藏子菜單，如果它的父母被點擊。下拉菜單點擊切換

EG在這JS fiddle我可以點擊「父母1」來揭示它的孩子，當我點擊「父母2」父母1的孩子隱藏和父母2的孩子顯示。但是，如果家長1的孩子表明我想要能夠通過再次點擊父母1（或者甚至更好的孩子以外的任何地方）來隱藏他們

我見過這樣的例子，其中每個父母和子菜單被給予單獨的類或IDS。我想避免這種情況，因爲它需要在cms中工作。

這裏是基本的代碼，我有

的HTML：

<div> 
<ul> 
    <li><a href="#">Parent 1</a> 
     <ul> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
      <li><a href="#">Parent 1 &raquo; Child 1</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Parent 2</a> 
     <ul> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
      <li><a href="#">Parent 2 &raquo; Child 2</a></li> 
     </ul> 
    </li> 
    <li><a href="#">Parent 3</a> 
     <ul> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
      <li><a href="#">Parent 3 &raquo; Child 3</a></li> 
     </ul> 
    </li> 
</ul>

的JavaScript：

$(document).ready(function() { 
    $("li").click(function() { 
     $('li > ul').hide(); 
     $(this).children("ul").toggle(); 
    }); 
});

CSS可能是沒有必要的，但其對小提琴如果需要

來源

2013-06-30 UntitledGraphic

試試這種方法。

$(document).ready(function() { 
    $("li").click(function() { 
     //Toggle the child but don't include them in the hide selector using .not() 
     $('li > ul').not($(this).children("ul").toggle()).hide(); 

    }); 
});

Demo

來源

2013-06-30 07:21:28 PSL

非常感謝PSL。 – UntitledGraphic

檢查此琴

http://jsfiddle.net/Kritika/SZwTg/1/

   $(document).ready(function() { 
         $("li").click(function() { 
          $('li > ul').not($(this).children("ul")).hide(); 
          $(this).children("ul").toggle(); 
          }); 
         });

或

   $(document).ready(function() { 
        $("li").click(function() { 
         var submenu=$(this).children("ul"); 
         $('li > ul').not(submenu).hide(); 
         submenu.toggle(); 
         }); 
        });

點擊「父母1」後會顯示其子女，當您點擊「父母2」時，父母1的孩子會隱藏，父母2的孩子會顯示。並且如果家長1的孩子表明您可以通過再次點擊家長1來隱藏他們。

來源

2013-06-30 08:01:17 Pbk1303

這也正是我想要的，不確定哪一個最好，希望你不介意我給第一個答案給出一個大的綠色勾號，它首先出現。 – UntitledGraphic

@CraigCooper：當然。 – Pbk1303

從我+1的努力... :) – PSL

最好使用的slideToggle在肘節的地方：

$(document).ready(function() { 
$("li").click(function() { 
    $('li > ul').not($(this).children("ul")).hide(); 
    $(this).children("ul").slideToggle('slow'); 
});

}）;

來源

2015-12-22 06:54:27 Anup

下拉菜單點擊切換

回答

相關問題