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

4

您只需要定位单击元素的下一个兄弟user-icon元素

    $(".user-icon").click(function(){
        $(this).next(".toolOptions").toggle();
    });
于 2013-10-22T10:29:08.057 回答
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

是的，使用next()

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

作为旁注，您的标记无效。使用验证器来修复错误。

于 2013-10-22T10:29:19.107 回答
1 
 $(".toolOptions").toggle();

引用具有类名的所有元素。所以尝试使用.closest().

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