.hover Works, On Click ne

Question

Donc cela m'a causé beaucoup de tête. Je fais un "sous-menu accordéon déroulant" (pour l'absence d'un meilleur nom). Mon script fonctionne, mais uniquement sur HOVER. Si j'essaie d'utiliser .click, .on ("click"), .on ("click", "li") etc. rien ne fonctionne. Le script ne fonctionne que lorsque vous utilisez .hover.

REMARQUE! Seul le "#TopMenu" est supposé avoir l'événement on click. Le sous-menu ("#accordion") va être en vol stationnaire.

Des idées?

travail:

$(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() 

}); 

Changer "#TopMenu" à CLIQUER ne fonctionne pas:

$(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() 

}); 

J'ai un test de travail ici: http://jsbin.com/nidazuq/3/embed?html,js,output

Je vais les noix sur ce , J'ai cherché haut et bas pour une solution. aidez s'il vous plaît.

Answer 1

L'ID doit être unique et unique pour une page. Vous avez utilisé deux fois dans la page. Ajout de violon avec quelques changements.

$('#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

d'abord tout ce que vous utilisez même Ids pour plusieurs éléments. C'est faux. Vous devez utiliser la classe pour la sélection. Modifier id='TopMenu' à class='TopMenu'. Deuxièmement, la fonction 'click' n'est pas déclenchée avec l'élément 'li'. Vous devriez écouter la fonction de clic d'un élément. Je ne suis pas familier avec les fonctions slideDown et slideUp, mais vous pouvez continuer à partir de là. Et n'oubliez pas que l'élément $(this) fait référence à <a href="#" class="menu_heading" rel="menu_heading">CLICK ME</a> pour cette fonction de clic.