Nettoyage du code - menu de jQuery hover - Excellente bibliothèque

J'ai un DIV qui s'affiche sur un vol stationnaire, et je me cache sur un événement hover sur le div #main, mais je ne peux pas m'empêcher de penser que je ne l'ai pas fait correctement - plus comme une version piratée ensemble ..Nettoyage du code - menu de jQuery hover

Quelqu'un peut-il jeter un oeil et offrir des options pour une manière plus efficace de le faire?

Le jQuery

$(".sign_in").hover(function() { 
     $("#sign_box").toggle();  
     return false; 
    }); 
    $('#sign_box').hover(function() { 
     $(this).show(); 
    }); 
    $("body #main").hover(function() { 
     $("#sign_box").hide(); 
    });

Le balisage

<div><a href="#" class="sign_in"><span>User Options</span></a></div> 
    <div id="sign_box"> 
    <ul class="account-links"> 
     <li><%= Html.ActionLink<EventController>(x => x.List(), "All Events")%></li> 
     <li><%= Html.ActionLink<MyEventsController>(x => x.List(), "My Events")%></li> 
     <li><%= Html.ActionLink<AccountController>(x => x.Edit(), "My Profile")%></li> 
     <li><%= Html.ActionLink<ClubController>(x => x.List(), "All Clubs")%></li> 
     <li><%= Html.ActionLink<MyClubsController>(x => x.List(), "My Clubs")%></li> 
     <li><%= Html.ActionLink<AccountController>(x => x.ChangePassword(), "Change My Password")%></li> 
     <li><%= Html.ActionLink<DependantController>(x => x.List(), "My Dependants") %></li> 
    </ul> 
    </div>

Le div sign_box est réglé sur display: none ... laissez-moi savoir si vous avez besoin de voir le CSS, ainsi ..

Source

2010-10-21 Kevin

Le code devrait être bon. Je ne comprends pas votre utilisation de .toggle() cependant. Je suis juste intéressé. Je remplacerais .toggle() par .show() ou supprimerais la dernière fonction et retournerais faux du premier pour obtenir l'effet de .toggle(). – Faili

Pourriez-vous configurer un jsfiddle afin que nous puissions vérifier que notre refactoring obtient le comportement voulu? –

Quelque chose comme ça peut-être ...

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" ></script> 
    <script> 
    $(document).ready(function() { 

     $(".sign_in, #sign_box").mouseover(function() { 
      $("#sign_box").show(); 
      return false; 
     }); 
     $('body').mouseover(function(){ 
      $("#sign_box").hide(); 
     }); 

    }); 
    </script> 
    <style> 
    body, html 
    { 
     height:100%; 
     width:100%; 
    } 
    #sign_box 
    { 
     display:none; 
     background-color:blue; 
    } 
    .sign_in{ 
     background-color:red; 
    } 
    ul, .sign_in, #sign_box 
    { 
     margin:0px; 
     padding:0px; 
     width:250px; 
    } 
    </style> 
</head> 
<body> 
    <div class="sign_in"> 
     <a href="#" ><span>User Options</span></a> 
    </div> 
    <div id="sign_box"> 
     <ul class="account-links"> 
      <li>All Events</li> 
      <li>My Events</li> 
      <li>My Profile</li> 
      <li>All Clubs</li> 
      <li>My Clubs</li> 
      <li>Change My Password</li> 
      <li>My Dependants</li> 
     </ul> 
    </div> 
</body> 
</html>

Source

2010-10-22 02:53:57

Nettoyage du code - menu de jQuery hover

Répondre

Questions connexes