jquery onclick menu déroulant
À l'aide de Google, j'ai trouvé ce code sur stackoverflow. - Je l'utiliser pour afficher un menu déroulant lorsque l'utilisateur clique sur son élément parent et le menu disparaît lorsque l'utilisateur clique à nouveau sur l'élément parent. J'ai besoin d'ajouter deux "fonctions", mais je ne sais pas comment.. Voici le code:
<script>
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
</script>
<script>
$(document).ready(function() {
$('.parent2').click(function() {
$('.sub-nav2').toggleClass('visible');
});
});
</script>
<script>
$(document).ready(function() {
$('.parent3').click(function() {
$('.sub-nav3').toggleClass('visible');
});
});
</script>
<script>
$(document).ready(function() {
$('.parent4').click(function() {
$('.sub-nav4').toggleClass('visible');
});
});
</script>
<script>
$(document).ready(function() {
$('.parent5').click(function() {
$('.sub-nav5').toggleClass('visible');
});
});
</script>
Ici, il y a le code html:
<li class="parent">chi siamo
<ul class="sub-nav">
<li><a href="http://www.sanremoset.it/chi_siamo/carla_evangelista.html">Dott.ssa Carla Evangelista</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/fulvio_torello.html">Dott. Fulvio Torello</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/mauro_evangelista.html">Dott. Mauro Evangelista</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/claudio_lanteri.html">Dott. Claudio Lanteri</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/francine_bontemps.html">Dott.ssa Francine Bontemps</a></li>
</ul>
</li>
<li class="parent2">prevenzione
<ul class="sub-nav2">
<li><a href="http://www.sanremoset.it/prevenzione/richiami_periodici.html">Richiami periodici</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/igiene_orale.html">Igiene orale</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/desensibilizzazioni.html">Desensibilizzazioni</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/fluoro.html">Fluoro</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/tests_salivari.html">Tests salivari</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/prevenzione_tumori.html">Prevenzioni tumori</a></li>
</ul>
</li>
Voici le code Css pour le sous-nav li élément. La classe parent n'a pas de css je l'utilise seulement pour feu le jquery code:
#menu .sub-nav li{
float: left;
width: 165px;
list-style: none;
text-align: left;
font-size: 14px;
font-family: "Helvetica Neue";
border-left: 1px solid;
border-right: 1px solid;
background-color: #e8e8e8;
margin-top: 0px;
}
La première chose, c'est que je veux que le menu pour masquer lorsque l'utilisateur clique sur un autre lien ou à l'extérieur de la dropdownmenu.
La deuxième chose, c'est que je veux le pointeur à devenir un coup de main lorsque l'utilisateur survole le <li>
avec la classe parent.
Comment ajouter ces deux caractéristiques?
Edit: ok oublier la deuxième chose, je viens de découvrir comment ajouter ceci, simplement à l'aide de la partie suivante de code css:
li { cursor: pointer; }
J'ai trouvé ce code et il fonctionne, mais seulement la première fois.. :
<script>
$(document).click(function(e){
var targetbox = $('.parent');
if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
$('.sub-nav').css("visibility", "hidden");
}
});
</script>
- J'ai envie de vous laissé de côté le CSS, nous sommes censés être en train de regarder, parce que j'ai perdu votre code dans un CodePen lien et rien ne s'affiche.
- désolé j'ai oublié d'ajouter le css de la <li> élément
Vous devez vous connecter pour publier un commentaire.
L'astuce peut être aussi simple que l'ajout d'une invisible "bouton" chapeau couvre la totalité de l'écran, de sorte que lorsque le menu est ouvert, vous pouvez cliquer à l'extérieur de la zone de menu et le menu est fermé.
Une démo peut être trouvé sur mon codepen:
http://codepen.io/Himechi90/pen/YyQrPr
Aussi, vous n'avez pas à écrire de sorte que beaucoup de jquery déclencheurs. Si vous le nom de tous vos sous-nav classes comme "sub-nav", vous pouvez cibler comme ci-dessous:
Bonne chance! 🙂
La
javascript
code doit être raccourcie et vous n'avez pas besoin de répéter$(document).ready
pour chaque clic.Aussi le balisage pourrait être mieux, je suggère plutôt de
<ul>
comme conteneur pour<li>
, utilisez<div>
élément.Ce lien sur le violon peut être utile, avoir un regard sur le violon
http://www.jsfiddle.net/NFTFw/29/