1

Javascript を使用してドロップダウン ログイン ボックスを作成しようとしていますが、試しているコードでは機能しません。

HTML:

<div id="links">

        <div id="links-wrap">

            <ul class="link">

                <li>
                    <a class="link1" href="#">Link 1</a>
                </li>

                <li>
                    <a class="link2" href="#">Link 2</a>
                </li>

                <li>
                    <a class="link3" href="#">Login</a>

                    <div id="login_wrap">

                        <div class="login_menu">

                            <form action="" method="post">
                                Username:</br> <input id="username" type="text" name="username" size="16">
                                Password: <input id="password" type="password" size="16" autocomplete="off">
                                <br>
                                <input id="submit" type="submit" value="Login">
                            </form>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

    </div>

CSS:

.link {
color: #3e3e3e;
display: block;
letter-spacing: 2px;
padding: 20px;
position: relative;
text-decoration: none;
text-transform: uppercase;
float: left;
list-style-type: none;
font-family: 'Open Sans', sans-serif;
font-size:14px;
}

#links-wrap {
float: right;
width: auto;
margin-top:-12px;
font-weight:600;
}

li {

padding-right:50px;
display:list-item;
text-align:-webkit-match-parent;
display : inline-block;
}


.login {

}

#username {
width:160px;
}

#password {
width:160px;
}

#submit {
margin-left:32.5%;
margin-top:10px;
}

.login_menu {
background-color:white;
border:1px solid black;
width: 180px;
height: 125px;
position: fixed;
margin-left: -60px;
margin-top:10px;
z-index:10;
font-size:10px;

}

#login_wrap {
margin-left:10px;
margin-top:10px;
visibility: hidden;
}

Javascript:

$(document).ready(function() {

  $(".link3").click(function() {
     $(this).children("#login_wrap").css("visibility","visible");
  });

});

上記のコードの複数の組み合わせを試してみましたが、役に立ちませんでした。誰かの経験がおそらく私を助けてくれると確信しています。

誰かが私が間違っていることを指摘するのを助けることができますか?

ありがとうございました。

4

3 に答える 3

1

あなたのコードの一部を修正しました。これは実際の例へのリンクです。

次に、コードの主なエラーは$(this).children("#login_wrap"). 構文に問題はありませんが、タグでラップされている$(this).parent().children("#login_wrap")ため、そうする必要があります。this<a>

これは私が以前に書いた古い例です。これは、この機能を代わりに使用してtoggle、より快適な表示とログイン ボックスを閉じる機能を追加します。

于 2013-06-02T07:29:37.850 に答える
0

#login_wrapの子ではありません$(".link3")。試す：

$(".link3").click(function() {
    $(this).siblings("#login_wrap").css("visibility","visible");
});

または（div IDはDOM内で一意であると見なされるため）：

$(".link3").click(function() {
    $("#login_wrap").css("visibility","visible");
});
于 2013-06-02T07:27:03.477 に答える
0 
$(document).ready(function() {

  $(".link3").click(function() {
     $(this).parent().find("#login_wrap").toggle();
  });

});

最初に親を探し、次に子を探すことをお勧めします。この場合、親はタグのコンテキストとして機能します。これにより、より保守しやすいコードが作成されます。.siblings() または何らかの関数を使用してログイン コントロールを探すと、JavaScript コードがタグの現在の位置に結合されるためです。将来、さらに 1 レベルにネストするなど、位置を変更すると、コードが失敗します。ページに複数のコントロールがある場合でも、このコードは正常に機能し、リンクに関連付けられた正しいコントロールを開きます。

補足: このような複数のコントロールをページに表示する場合は、id="login_wrapped" を使用せず、代わりに class="login_wrapped" に変更してください。

于 2013-06-02T07:28:35.060 に答える