这是我的代码,
$(document).ready(function (e) {
$('.showhide').click(function(e) {
$(this).nextAll('.dropdown:lt(1)').slideToggle(100);
e.stopPropagation();
});
$(window).click(function(e) {
var container = $(".dropdown");
if (container.is(':visible') && !$(e.target).closest('.dropdown').length) {
container.hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>
<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>
此代码可以很好地打开和关闭 div。此外,如果我在 div 打开时单击外部,它会很好地关闭它们。
但是,问题是如果我一个接一个地单击它们,它会同时打开多个 div。我怎样才能一次只打开一个 div?
最佳答案
您可以在单击任何 showhide
元素时隐藏 siblings
。
$('.dropdown').hide()
$('.showhide').click(function(e) {
e.stopPropagation();
$(this).siblings('.showhide').next('.dropdown').slideUp()
$(this).next('.dropdown').slideToggle(100);
});
$(window).click(function(e) {
var container = $(".dropdown");
if (container.is(':visible') && !$(e.target).closest('.dropdown').length) {
container.hide();
}
});
a.showhide {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>
<a class="showhide">Button</a>
<div class="dropdown">
<a href="#">Update</a>
<a href="#">Delete</a>
</div>
关于javascript - jQuery slideToggle 一次切换多个 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46645785/