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
InformationsquelleAutor P.Davide | 2015-10-08