代碼清理 - jquery懸停菜單

我有一個DIV顯示懸停事件，並隱藏在#main div上的懸停事件，但我忍不住覺得我沒有做到正確 - 更像是一個黑客一起的版本..代碼清理 - jquery懸停菜單

有人可以看一看，並提供更有效的方式做選擇嗎？

jQuery的

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

標記

<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>

股利sign_box設置爲顯示：沒有...讓我知道，如果你需要看到CSS以及..

來源

2010-10-21 Kevin

代碼應該沒問題。我不明白你使用.toggle（）。我只是感興趣。我會用.show（）替換.toggle（）或刪除最後一個函數，並從第一個返回false以獲得.toggle（）的效果。 – Faili 2010-10-21 14:52:26

你會設置一個jsfiddle，以便我們可以驗證我們的重構是否獲得了預期的行爲？ – 2010-10-21 14:53:17

也許這樣的東西...

<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>

來源

2010-10-22 02:53:57

代碼清理 - jquery懸停菜單

回答

相關問題