2013-03-23 85 views
3

我有一個UL列表項,我正在使用JQuery進行切換。該列表項目包含一個鏈接,當我點擊鏈接時,它不做任何事情,列表項目只是崩潰。UL中的鏈接無法正常工作

<script> 
    $(function() { 
     function toggleAccount(e) { 
      if ($('#top-login-wrapper').hasClass('down')) { 
       $('#top-login-wrapper').removeClass('down'); 
      } else { 
       $('#top-login-wrapper').addClass('down'); 
      } 
     } 

     function hideAccount(e) { 
      if ($('#top-login-wrapper').hasClass('down')) { 
       $('#top-login-wrapper').removeClass('down'); 
      } 
     } 

     $("#top-login-wrapper").click(toggleAccount); 
     $("#top-login-wrapper").focusout(hideAccount); 
     $("#top-login-wrapper").blur(hideAccount); 
    }); 
</script> 

標記:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<link href="css.css" rel="stylesheet" /> 
<script src="jquery-1.9.0.js"></script> 
<script src="jquery-1.9.0.min.js"></script> 

    </head> 
<body> 
<form id="form1" runat="server"> 
<div> 
    <div class="header-wrap"> 
     <div id="accountHeader" runat="server"> 
        <ul class="nav"> 
         <li> 
          <div id="top-login-wrapper"> 
           <a href="#" id="login-hover-link"> 
        <asp:Label runat="server" ID="AccountName" Text="John Doe"/> 
           </a> 
         div id="login-hover-cont" class="offscreen profile-widget"> 
            <div class="inner-content"> 
             <h3> 
              <span><%= AccountName.Text %></span> 
             </h3> 
             <span class="account-avatar"> 
              <img src="../img/avater.gif"" alt="" /> 
             </span> 
             <ul class="profile-links"> 
              <li> 
               <a href="#">My Account</a> 
              </li> 
              <li> 
         <a href="../logout.aspx" runat="server" id="logout">Sign Out</a> 
              </li> 
             </ul> 

            </div> 
            <div class="profile-widget-arrow-border"></div> 
            <div class="profile-widget-arrow"></div> 
           </div> 
          </div> 
         </li> 
        </ul> 
       </div> 
     </div> 
    </div> 
    </form> 
</body> 

我不知道我做錯了,可有人請幫助我。

JsFiddle link

+0

只是有錯誤的有很多東西,上手最好的辦法是做一個小提琴和鏈接我們回到:[http://jsfiddle.net/](http:/ /jsfiddle.net/) – 2013-03-23 02:20:13

+0

顯然是一個CSS問題。 – 2013-03-23 05:43:08

回答

0

我不是ASP的專家,但如果你把一個錨標記在一個鏈接,你需要它的樣式在CSS中對你的L1標籤的尺寸伸展。

a { 
display: block; 
height: 30px; // depends on your setting 
width:100%; 
} 

希望有助於一些。

0

修復:

$(function() { 

    function toggleAccount(event) { 
    if ($('#top-login-wrapper').hasClass('down')) { 
     $('#top-login-wrapper').removeClass('down'); 
     $('top-login-wrapper').fadeOut(1000); 
    } else { 
     $('#top-login-wrapper').addClass('down'); 
     $('top-login-wrapper').fadeIn(1000); 
    } 
    event.stopPropagation(); 
} 

    function hideAccount(event) { 
    if ($('#top-login-wrapper').hasClass('down')) { 
     $('#top-login-wrapper').removeClass('down'); 
    } 
    } 

    $("#top-login-wrapper").click(toggleAccount); 
    $('body').click(hideAccount); 
    $('html').click(hideAccount); 
});