Jquery slide déroulant à bascule disparaît lorsque les feuilles de souris

voix
0

J'ai essayé de pratiquer à des menus coulissants avec slideToggle, slideDown / up etc ... mais je ne peux pas sembler obtenir ce droit si je veux passer la souris sur le menu.

J'ai ce jusqu'à présent, mais il ne fonctionne que sur un clic et il ne disparaît pas après avoir déménagé loin de l'élément de menu. Donc, je voudrais simplement passer la souris sur l'élément de menu principal, puis déposer les listes déroulantes. Toute aide est appréciée !!

 <form id=form1 runat=server>


        <div id=multiDropMenu>
            <ul id=menu>
                <li><a href=# id=places>Places</a>
                    <ul id=dropdown1>
                        <li><a href=http://google.com>To Go</a></li>
                        <li><a href=#>To See</a></li>
                    </ul>
                </li>
                <li><a href=#>Transportation</a></li>
            </ul>
        </div>

    </form>


    <script type=text/javascript>
        $(document).ready(function() {
            $(#places).toggle(function() { $(#dropdown1).slideDown(fast); },

                                function() { $(#dropdown1).slideUp(fast); });


        });

    </script>
Créé 17/08/2010 à 16:59
source utilisateur
Dans d'autres langues...                            


2 réponses

voix
1

Vous pouvez utiliser .hover()le parent <li>et .slideToggle()puisqu'il est un enfant, comme ceci:

$(function() {
   $("#places").parent().hover(function() { 
      $("#dropdown1").slideToggle("fast"); 
   });
});​

Vous pouvez essayer ici , cela vous permet de planer partout dans le <li>, vous pouvez aussi faire beaucoup plus générique, comme ceci:

 $("#menu li").hover(function() { 
    $(this).find("ul").slideToggle("fast"); 
 });

Vous pouvez essayer cette version ici , cela fonctionne beaucoup mieux pour un certain nombre d'éléments, pas besoin d'ID sur chacun.

Créé 17/08/2010 à 17:04
source utilisateur

voix
0

Il suffit de changer $("#places").togglede$("#places").hover

Voir la démo ici: http://jsfiddle.net/mftWK/

Créé 17/08/2010 à 17:03
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more