Question

在下面的代码中，当点击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>

Answer 1

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

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

Answer 2

您可以按类名选择元素，并且在HTML中，多个元素具有toolOptions类，因此如果使用类选择器而不是它的选择，则选择具有给定类的所有元素。

如果要仅对特定元素应用效果，则需要设置特定的选择器规则以选择元素。

根据您的要求，您需要选择下一个点击图标的范围。你可以使用.next()：

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

OR

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

OR

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

Answer 3

是的，请使用next()

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

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

Answer 4

 $(".toolOptions").toggle();

引用具有类名的所有元素。因此，请尝试使用 .closest() 引用最接近的元素。

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

jQuery切换打开所有隐藏的div

4 个答案: