jQuery停止函数运行两次
jQuery stop function running twice
我使用slideUp/down来显示和隐藏内容,并已将其写入,以便在打开另一个内容时关闭任何可见内容。这是有效的,直到我试图通过点击关闭内容,它会立即再次打开它。
HTML
<ul class="contents">
<li>
while($results->fetch()){
<div class="details">text</div>
<div class="more_details">more text</div>
}
</li>
</ul>
jQuery
$("#results").on("click", ".details", function() {
$(".open").slideUp(600, function() {
$(".open").css("display", "none").removeClass("open");
});
if ($(this).hasClass("open")) {
$(this).slideUp( 600, function() {
$(this).css("display", "none").removeClass("open");
});
} else {
$(this).next(".more_details").slideDown(600, function() {
$(this).css("display", "show").addClass("open");
});
}
});
在向下的代码中,您正在处理下一个同级more_details
,在向上的代码中您正在处理this
元素。
$("#results").on("click", ".details", function() {
var $details = $(this).next(".more_details");
$details.slideToggle(600, function() {
$details.toggleClass("open");
});
$(".more_details.open").not($details).slideUp(600, function() {
$(this).removeClass("open");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="results">
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
<div class="details">details</div>
<div class="more_details">more_details</div>
</div>
相关文章:
- Append元素在运行两次函数后不显示
- 我的所有代码在使用Webpack编译时都会运行两次
- 为什么两次运行完全相同的正则表达式的结果不同
- JavaScript/JQuery表单验证运行两次
- 若在两个不同的选项卡中打开同一个页面,如何防止javascript运行两次
- jQuery停止函数运行两次
- Socket.IO:重新连接导致服务器连接代码运行两次
- Gulp任务似乎运行了两次,而不是一次
- 函数jQuery.animation()运行了两次行,但不起作用
- nodejs - 为什么我的异步函数运行两次
- 模板函数在加载网页时运行两次
- 为什么 document.onreadystatechange 运行两次
- 我需要运行此功能两次
- 为什么 ajax 'application/json' 要运行 PHP 代码两次
- 必须在 Firefox 中运行两次 removeChild()
- nodeJs,运行两次sql可以将它们组合成json
- 防止脚本在执行时运行两次
- D3.js键功能在简单的选择器/数组组合上运行两次
- JS运行两次不起作用
- 如何防止 iframe 运行两次加载事件