3

JQueryと切り替えているリストアイテムが1つある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リンク

4

2 に答える 2

0

私は ASP の専門家ではありませんが、リンクにアンカー タグを配置する場合は、li タグのサイズに合わせて CSS でスタイルを設定する必要があります。

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

それがいくつかの助けになることを願っています。

于 2013-03-23T02:50:12.163 に答える
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);
});
于 2013-03-23T07:47:38.900 に答える