如何防止slideToggle在第一次点击时打开然后关闭
Posted
技术标签:
【中文标题】如何防止slideToggle在第一次点击时打开然后关闭【英文标题】：How to prevent slideToggle opening then closing on first click 【发布时间】：2019-10-04 16:30:34 【问题描述】：我有一个slideToggle，它给了我一个手风琴式的功能。这一切都很好，除了第一次单击它会短暂显示内容 div，但随后会立即将其滑动关闭。再次单击幻灯片会正确打开，并且所有后续单击都正常运行。
这是我正在使用的 Jquery 脚本：
$(".tm-section-label").click(function()
$(this).parent().addClass('active').find('.tm-extra-product-options-container').slideToggle('fast,easing');
);~
$(".tm-section-label").click(function()
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
);
这是我正在使用的 CSS：
.prodTabs div.cpf_hide_element
display: none;
margin-bottom: 0;
.prodTabs.active > div.tm-extra-product-options-container
visibility: visible;
height: auto;
opacity: 1;
.prodTabs.active div.cpf_hide_element
display: block;
如何使初始点击只需滑动打开 div 而无需点击两次？
【问题讨论】：
可以分享html代码吗 看起来不错，一定很微妙。 【参考方案1】：https://dotnetfiddle.net/hpJDeF
@
Layout = null;
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prodTabs div.cpf_hide_element
display: none;
margin-bottom: 0;
.prodTabs.active > div.tm-extra-product-options-container
visibility: visible;
height: auto;
opacity: 1;
.prodTabs.active div.cpf_hide_element
display: block;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<!-- Script to illustrates slideToggle() method -->
<script>
$(document).ready(function ()
$(".tm-section-label").click(function ()
$(this).parent().addClass('active');
var q = $(this).parent().find('.tm-extra-product-options-container');
if (q.hasClass('cpf_hide_element'))
q.removeClass('cpf_hide_element');
else
q.slideToggle('fast,easing');
q.removeClass('cpf_hide_element');
);
$(".tm-section-label").click(function ()
$(".tm-section-label").not(this).parent().removeClass('active').find('.tm-extra-product-options-container').slideUp('fast');
);
);
</script>
</head>
<body>
<div class="prodTabs" id="parent">
<div class="tm-extra-product-options-container cpf_hide_element" id="theContent">The content..</div>
<div class="tm-section-label">Click Me</div>
</div>
</body>
</html>
【讨论】：
以上是关于如何防止slideToggle在第一次点击时打开然后关闭的主要内容，如果未能解决你的问题，请参考以下文章
多次单击 JQuery slideToggle() - 防止动画