Question

我有一个带有一个列表项的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

Answer 1

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

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

希望有所帮助。

Answer 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);
});

UL内的链接不起作用

2 个答案: