.hover Works、Clickではない

Question

これは私に多くの頭痛をもたらしました。 私は "プルダウンアコーディオンのサブメニュー"（より良い名前の欠如のために）を作っています。 私のスクリプトは動作しますが、HOVERでのみ動作します。 .click、.on（ "click"）、.on（ "click"、 "li"）などを使用しようとすると何も動作しません。このスクリプトは、.hoverを使用している場合にのみ機能します。

注記！ クリックイベントが発生するはずの「#TopMenu」だけです。サブメニュー（「#accordion」）がホバーします。

アイデア？

ワーキング：クリックし、 "#TopMenu" を変更する

$(document).ready(function() { 

    $('#accordion li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

$('#TopMenu li').hover(function() { 

     $(this).find('li').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('li').stop(true, true).slideUp() 
    }).find('li').hide() 

}); 

が動作していません：

$(document).ready(function() { 

    $('#accordion li').hover(function() { 
     $(this).find('ul').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('ul').stop(true, true).slideUp() 
    }).find('ul').hide() 

$('#TopMenu li').on('click', function() { 

     $(this).find('li').stop(true, true).slideDown() 
    }, function() { 
     $(this).find('li').stop(true, true).slideUp() 
    }).find('li').hide() 

}); 

私はここでの作業テストがあります。http://jsbin.com/nidazuq/3/embed?html,js,output

を、私はこの上でナットを行きますよ、私は解決策のために高いと低い検索しました。助けてください。

Answer 1

IDはページに固有で、単一である必要があります。あなたはそのページで2回使用しました。いくつかの変更を加えたバイブル。

$('#TopMenu li').on('click', function() { 
 
    $(this).children('ul').slideToggle(); 
 
}); 
 
$("#TopMenu li ul li > a").hover(function(){ 
 
    $(this).next('ul').slideToggle(); 
 
})

#TopMenu li ul, .firstStep ul ul, .firstStep ul{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="TopMenu"> 
 
    <li><a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a> 
 
    <ul id="accordion"> 
 
     <li> <a href="#" class="history_heading" rel="history_heading">HISTORY</a> 
 
     <ul> 
 
      <li><a href="#">Link One</a></li> 
 
      <li><a href="#">Link Two</a></li> 
 
      <li><a href="#">Link Three</a></li> 
 
      <li><a href="#">Link Four</a></li> 
 
      <li><a href="#">Link Five</a></li> 
 
     </ul> 
 
     </li> 
 
     <li> <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a> 
 
     <ul> 
 
      <li><a href="#">Link One</a></li> 
 
      <li><a href="#">Link Two</a></li> 
 
      <li><a href="#">Link Three</a></li> 
 
      <li><a href="#">Link Four</a></li> 
 
      <li><a href="#">Link Five</a></li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

あなたが複数の要素に同じIDを使用しているすべての最初の。これは間違っています。選択のためにクラスを使用する必要があります。id='TopMenu'〜class='TopMenu'を変更してください。第2に、 'クリック'機能は 'li'要素でトリガされません。 'a'要素のクリック機能を聴くべきです。

$('.TopMenu li a').on('click', function() {}); 

私は、slideDownとslideUpの機能に慣れていませんが、そこから続けることができます。そして、このクリック機能のために$(this)要素が<a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a>を指すことを忘れないでください。