UL 内的链接不起作用答案

【问题标题】：links within UL not workingUL 内的链接不起作用
【发布时间】：2013-03-23 02:16:24
【问题描述】：

我有一个带有一个列表项的 UL，我用 JQuery 切换。列表项包含一个链接，当我单击该链接时，它什么也不做，列表项只会折叠。

 <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

【问题讨论】：

有很多事情是错误的，最好的开始方法是制作一个小提琴并将我们链接回来：http://jsfiddle.net/
显然是css问题。

标签： jquery asp.net

【解决方案1】：

我不是 asp 专家，但是如果你在链接中放置一个锚标签，你需要在 css 中设置它的样式以向你的 li 标签的尺寸延伸。

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

希望对一些人有所帮助。

【讨论】：

【解决方案2】：

修复：

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

【讨论】：