クリック時のドロップダウンメニュー

Question

私は数多くのJSクエリを試してみましたが、どれも動作していないようです。

関連するリストアイテムがクリックされたときにのみドロップダウンメニューを表示したいのですが、ユーザーがulをクリックするかリンクをクリックするまで表示する必要があります。ここで

は私のhtmlです：

<div class="sub-nav"> 
    <div class="container"> 
    <ul> 
     <a href="#"><li class="active">All</li></a> 
     <a href="#"><li>Videos</li></a> 
     <a href="#"><li>Images</li></a> 
     <a href="#"><li>Maps</li></a> 
     <a href="#"><li>News</li></a> 
     <a href="#"> 
     <li id="has-sub">More 
      <ul> 
      <a href="#"><li>Shopping</li></a> 
      <a href="#"><li>Books</li></a> 
      <a href="#"><li>Flights</li></a> 
      <a href="#"><li>Apps</li></a> 
      </ul> 
     </li> 
     </a> 
     <a href="#"> 
     <li id="search-tools">Search Tools 
      <ul> 
      <a href="#"><li id="has-sub">Any Country</li></a> 
      <a href="#"><li id="has-sub">Any Time</li></a> 
      <a href="#"><li id="has-sub">All Results</li></a> 
      </ul> 
     </li> 
     </a> 
    </ul> 
    </div> 
</div> 

Answer 1

はこれを試してみてください：

$("li:has(ul)").click(function(){ 
$("ul",this).toggle('slow'); 
}); 

あなたはjQueryのライブラリを持っていることを確認してください。

Answer 2

代わりにjQueryライブラリをロードすると、このように使用できます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

さて、これはあなたが探しているものである

<style> 
    li > ul{display:none;} 
    .show {display:block;} 
</style> 

以下のようにあなたのメニューHTMLにスタイルを適用します。

<script> 
    jQuery("li:has(ul)").click(function(){ 
     jQuery("ul",this).toggleClass('show'); 
    }); 
</script> 

$("li:has(ul)").click(function(){ 
 
    $("ul",this).toggleClass('show'); 
 
});

li > ul{display:none;} 
 
.show {display:block;} 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-nav"> 
 
       <div class="container"> 
 

 
        <ul> 
 
         <a href="#"><li class="active">All</li></a> 
 
         <a href="#"><li>Videos</li></a> 
 
         <a href="#"><li>Images</li></a> 
 
         <a href="#"><li>Maps</li></a> 
 
         <a href="#"><li>News</li></a> 
 
         <a href="#"><li id="has-sub">More 
 
          <ul> 
 
           <a href="#"><li>Shopping</li></a> 
 
           <a href="#"><li>Books</li></a> 
 
           <a href="#"><li>Flights</li></a> 
 
           <a href="#"><li>Apps</li></a> 
 
          </ul> 
 
         </li></a> 
 
         <a href="#"><li id="search-tools">Search Tools 
 
          <ul> 
 
           <a href="#"><li id="has-sub">Any Country</li></a> 
 
           <a href="#"><li id="has-sub">Any Time</li></a> 
 
           <a href="#"><li id="has-sub">All Results</li></a> 
 
          </ul> 
 
         </li></a> 
 
        </ul> 
 

 
       </div> 
 
      </div>

使用jQuery代わりに$、いくつかのフレームワークやCMSツールは、それとの競合を持っているので。したがって、常にjQueryが機能します。

Answer 3

あなたが尋ねたようにリンクをクリックすると、このソリューションのドロップダウンメニューが崩壊します。

$('a').click(function(){ 
 
    $('.container ul:not(:first-child)').hide(); 
 
    if($(this).next().is('ul')){ 
 
    $(this).next().toggle('slow'); 
 
    } 
 
});

ul ul{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="sub-nav"> 
 
       <div class="container"> 
 

 
        <ul> 
 
         <a href="#"><li class="active">All</li></a> 
 
         <a href="#"><li>Videos</li></a> 
 
         <a href="#"><li>Images</li></a> 
 
         <a href="#"><li>Maps</li></a> 
 
         <a href="#"><li>News</li></a> 
 
         <a href="#"><li id="has-sub">More 
 
          <ul> 
 
           <a href="#"><li>Shopping</li></a> 
 
           <a href="#"><li>Books</li></a> 
 
           <a href="#"><li>Flights</li></a> 
 
           <a href="#"><li>Apps</li></a> 
 
          </ul> 
 
         </li></a> 
 
         <a href="#"><li id="search-tools">Search Tools 
 
          <ul> 
 
           <a href="#"><li id="has-sub">Any Country</li></a> 
 
           <a href="#"><li id="has-sub">Any Time</li></a> 
 
           <a href="#"><li id="has-sub">All Results</li></a> 
 
          </ul> 
 
         </li></a> 
 
        </ul> 
 

 
       </div> 
 
      </div>

Answer 4

<div class="sub-nav"> 
      <div class="container"> 

       <ul> 
        <li class="active">All</li> 
        <li>Videos</li> 
        <li>Images</li> 
        <li>Maps</li> 
        <li>News</li> 
        <li id="has-sub">More 
         <ul> 
          <li>Shopping</li> 
          <li>Books</li> 
          <li>Flights</li> 
          <li>Apps</li> 
         </ul> 
        </li> 
        <li id="search-tools">Search Tools 
         <ul> 
          <li id="has-sub">Any Country</li> 
          <li id="has-sub">Any Time</li> 
          <li id="has-sub">All Results</li> 
         </ul> 
        </li> 
       </ul> 

      </div> 
     </div> 

これは