2013-03-23 5 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> 

Markup:

<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/) –

+0

Очевидно, проблема css. –

ответ

0

Я не эксперт жерех, но если поставить якорь тег в ссылке, вам нужно укладывать его в CSS, чтобы растянуть по отношению к размерам вашего Li тега.

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

Надеюсь, что это поможет.

0

Fix:

$(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); 
}); 
Смежные вопросы