0

以下のコードでは、 をクリックしたときにスパンshow/hideしようとしています。今のところ、それらは表示されますが、クリックしたものだけでなく、すべてが表示されます. アイコンの下にあるスパンのみを表示する可能性はありますか?toolOptions<i class="icon-user user-icon"></i>

    <!DOCTYPE html>
    <html lang="en" dir="ltr" class="client-js">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Stack Example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://localhost/site/css/bootstrap.css" media="screen">
</script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".user-icon").click(function(){
            $(".toolOptions").toggle();
        });
            return false;
        });
    </script>

    <style type="text/css">
    .toolOptions{
        display:none;
    }
    </style>
    </head>


    <body>

    <div class="user">
    <span>User Name</span>
    <span class="tools"><i class="icon-user user-icon"></i>
    <span class="toolOptions">
        <li>Option A</li>
        <li>Option B</li>
        <li>Option C</li>
        <li>Option D</li>
    </span>
    </span>
    </div>

    <div class="user">
    <span>User Name</span>
    <span class="tools"><i class="icon-user user-icon"></i>
    <span class="toolOptions">
        <li>Option A</li>
        <li>Option B</li>
        <li>Option C</li>
        <li>Option D</li>
    </span>
    </span>
    </div>

    <div class="user">
    <span>User Name</span>
    <span class="tools"><i class="icon-user user-icon"></i>
    <span class="toolOptions">
        <li>Option A</li>
        <li>Option B</li>
        <li>Option C</li>
        <li>Option D</li>
    </span>
    </span>
    </div>


    </body>

    </html>
4

4 に答える 4

2

クラス名で要素を選択し、HTML では複数の要素にtoolOptionsクラスがあるため、クラスセレクターを使用すると、指定されたクラスを持つすべての要素が選択されます。

特定の要素だけに効果を適用したい場合は、特定のセレクタールールを設定して要素を選択する必要があります。

要件として、クリックされたアイコンの次のスパンを選択したいとします。あなたが使用できるよりも.next()：

 $(".user-icon").click(function(){
        $(this).next(".toolOptions").toggle();
 });

また

 $(".user-icon").click(function(){
       $(this).parent().find(".toolOptions").toggle();
 });

また

 $(".user-icon").click(function(){
       $(this).closest(".toolOptions").toggle();
 });
于 2013-10-22T10:44:42.277 に答える
1 
 $(".toolOptions").toggle();

クラス名を持つすべての要素を参照します。そのため、 を使用して最も近い要素を参照してみてください.closest()。

 $(".user-icon").click(function(){
            $(this).closest(".toolOptions").toggle();
        });
于 2013-10-22T10:30:34.080 に答える