événement jQuery effet déclencheur parent pour enfant

Mon code html est la suivante: (info sur le fond)événement jQuery effet déclencheur parent pour enfant

<!DOCTYPE html> 
<html> 
    <head> 
     <title>My Site</title> 
     <link type='text/css' rel='stylesheet' href='style/style1.css'></link> 
     <script type='text/javascript' src='scripts/jquery-2.0.0.min.js'></script> 
     <script type='text/javascript' src='scripts/script1.js'></script> 
    </head> 
    <body> 
     <div id="title"> 
      <h1>Welcome to My Site</h1> 
     </div> 
     <div id='menu_Bar'> 
      <div id='home' class='selector'> 
       <div class='back'> 
        <ul class='empty'> 
         <li>Home</li> 
         <div style='display: none'> 
          <li><a href=''>option 1</a></li> 
          <li><a href=''>option 2</a></li> 
          <li><a href=''>option 3</a></li> 
          <li><a href=''>option 4</a></li> 
          <li><a href=''>option 5</a></li> 
         </div> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

Mon jQuery est:

$(document).ready(function() { 
    $('.selector').mouseenter(function(){ 
     $(this.'div ul div').slideToggle('slow'); 
    });

Maintenant, je sais que la dernière partie ne fonctionnera pas (parce que je demanderais si c'était le cas). Mais je suis sûr que vous voyez ce que j'essaie de faire. J'essaie de faire en sorte que lorsque le sélecteur est survolé, il va ouvrir son ensemble de liens. J'allais presque utiliser .options pour la deuxième partie, mais je me suis rendu compte que cela changerait (ou affecterait) tous dans la même classe, ce qui ne permettrait pas de placer des boutons similaires sur les côtés. Alors, comment quelqu'un utiliserait-il le parent pour affecter l'enfant du parent?

Le css:

div { 
    border: 1px solid black; 
} 

.empty { 
    list-style: none; 
} 

.options { 
    display: none; 
    background-color: lightblue; 
} 

.selector { 
    background-color: transparent; 
}

Source

2013-06-08 Reuben Renquist

Il devraient être

$(document).ready(function() { 
    $('.selector').mouseenter(function(){ 
     $(this).find('> div > ul > div').slideToggle('slow'); 
    }); 
});

Démo: Fiddle

Source

2013-06-08 02:11:30

événement jQuery effet déclencheur parent pour enfant

Répondre

Questions connexes