UL 내에서 링크가 작동하지 않습니다.

JQuery와 전환하는 목록 항목이 하나있는 UL이 있습니다. 목록 항목에는 링크가 포함되어 있습니다. 링크를 클릭해도 목록 항목 만 축소됩니다.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

출처

2013-03-23 sinestro

단지 잘못된 일을 많이하고 시작하는 가장 좋은 방법은 바이올린을 우리를 다시 연결이되어있다 : [http://jsfiddle.net/](http:/ /jsfiddle.net/) –

분명히 css 문제입니다. –

나는 더 ASP 전문가입니다,하지만 당신은 링크의 앵커 태그를 넣을 경우, 당신은 당신의 리튬 태그의 차원으로 스트레칭 CSS에서 스타일을해야합니다.

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

일부 도움이 되길 바랍니다.

출처

2013-03-23 02:50:12 Daniel

수정 :

$(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); 
});

출처

2013-03-23 07:47:38 sinestro

UL 내에서 링크가 작동하지 않습니다.

답변

관련 문제