Question

我遇到了问题：

当我点击我的'.glass'div时，会打开多个'.permalinks'div，但我只想打开我点击的那个。

这是我的代码：

    <script type="text/javascript">
    $(window).ready(function() {
        $('.glass').click(function() {
            $('.permalinks').slideToggle(function() {
            });
        });
    });
    </script>

这是CSS：

    .permalinks {
        display:none;
        position:absolute;top:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.7);
    }

    .reblog, .link, .like {
        display:inline-block;
        margin:2%;
        margin-top:45%;
        padding:7% 7% 4% 7%;
    }

    .reblog, .link, .like {
        width:10%;
    }

    .reblog {
        background:#317FD4;
    }

    .link {
        background:#38C264;
    }

    .like {
        background:#ED4A4A;
    }

    .glass {
        position:absolute;
        top:0;
        left:0;
        background:#f3f3f3;
    }

这就是html：

      <div class="permalinks">

      <div class="reblog"><center><img src=""></center></div>

      <div class="link"><center><img src=""></center></div>

      <div class="like"><center><img src=""></center></div>

      </div>

      <img class="glass" src="" width="5%">

如果你能告诉我我做错了什么，请。

Answer 1

将点击处理程序分配到.permalinks并使用$(this).slideToggle()

$(window).ready(function() {
    $('.permalinks').click(function() {
        $(this).slideToggle();
    });
});

http://jsfiddle.net/yRFSV/

Answer 2

如果.permalinks是.glass的孩子，则很容易：

    $(window).ready(function() {
        $('.glass').click(function() {
            $(this).find('.permalinks').slideToggle(function() {
            });
        });
    });

Answer 3

如果.permalinks是.glass的孩子，那么您可以在点击后直接选择它。

$('.glass').on('click', function() {
  $(this).find('.permalinks').slideToggle();
});

Answer 4

两个选项：

.permalinks位于DOM树中的.glass之后使用$(this).next('.permalinks').slideToggle(function() {
.permalinks位于DOM树中的.glass之前使用$(this).prev('.permalinks').slideToggle(function() {

Answer 5

你可能想要

<script type="text/javascript">
$(window).ready(function() {
    $('.glass').click(function() {
        $(this).children('.permalinks').slideToggle(function() {
        });
    });
});
</script>

Jquery'this'选择器问题

5 个答案: