javascript - jQuery 与 For 循环切换

Question

这是我的 HTML，

{% for loop several times %}

<a href="#" class="showhide">Button</a><br />
<div class="dropdown">
    <a href="#">Update</a>
    <a href="#">Delete</a>
</div>

{% endfor %}

此外，

$(document).ready(function () {
$('.showhide').click(function() {
    $('.dropdown').toggle();
});
});
$(document).mouseup(function(e) {
var container = $(".dropdown");
if(container.is(':visible')&&!$(e.target).closest('.dropdown').length){
    container.hide();}
});
});

Divs 可以很好地打开和关闭。但问题是，因为我有一个 for 循环，“按钮”在一个屏幕上多次出现，如果我只单击一个按钮，所有其他按钮也只需单击一下即可打开和关闭 div。

如何让它们分别打开div？

Answer 1

您只需将下一个 .dropdown 定位到每个 .showhide 按钮，这样您就可以使用 $(this).nextAll('.dropdown:lt (1)')

$(document).ready(function () {
$('.showhide').click(function(e) {
$(this).nextAll('.dropdown:lt(1)').toggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" class="showhide">Button</a><br />
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>