クリック機能付きのjQueryドロップダウンメニューの作成方法

Question

ここに私のHTMLコードです。 ul li上navMenuクラスのクリックをターゲット

<div class="navMenu"> 
    <ul> 
    <li> 
     <a href="#">Home</a> 
     <ul> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     <li><a href="#">Link 3</a></li> 
     <li><a href="#">Link 4</a></li> 
     </ul> 
    </li> 
</div> 

$(document).ready(function(){ 
    $(".navMenu ul li").click(function() { 
    $(this).find('li ul.child').fadeToggle(400); 
    }); 
}); 

。それから私はそれがリンクが見つけられるli ul.childを見つけることを望みます。

Answer 1

コードの主な問題は、存在しない要素find()にしようとしていることです。

代わりfind()に子ulをあなたのコードを修正し、それにfadeToggle()を呼び出すことができます。

$(".navMenu ul li").click(function() { 
 
    $(this).find('ul').fadeToggle(400); 
 
});

.navMenu > ul > li > ul { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navMenu"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
     <ul> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

はまた、あなたがCSSでこれを行うことができますだけで、あなたがサポートする必要はありませんと仮定しますIE7以下：

.navMenu > ul > li > ul { 
 
    opacity: 0; 
 
    transition: opacity 0.4s; 
 
    position: absolute; 
 
} 
 

 
.navMenu > ul > li > a:focus + ul { 
 
    opacity: 1; 
 
}

<div class="navMenu"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
     <ul> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

あなたのためにこのコード意志の作品は、あなたがどのセレクタ

$(".navMenu ul>li").click(function() { 
 
    $(this).children('ul').fadeToggle(400); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navMenu"> 
 
     <ul> 
 
     <li> 
 
     <a href="#">Home</a> 
 
     <ul> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li><a href="#">Link 2</a></li> 
 
      <li><a href="#">Link 3</a></li> 
 
      <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 3

上で適切にJavaScriptを適用していないので、これはあなたがやりたいことです：

$(document).ready(function(){ 
 
    $(".navMenu ul li ul li").click(function() { 
 
    $(this).parent().children().fadeToggle(400); 
 
    }); 
 
});

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

 
<div class="navMenu"> 
 
    <ul> 
 
    <li> 
 
     <a href="#">Home</a> 
 
     <ul> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li><a href="#">Link 2</a></li> 
 
     <li><a href="#">Link 3</a></li> 
 
     <li><a href="#">Link 4</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>