如何防止slideToggle在第一次点击时打开然后关闭答案

【问题标题】：How to prevent slideToggle opening then closing on first click如何防止slideToggle在第一次点击时打开然后关闭
【发布时间】：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代码吗
看起来不错，一定很微妙。

标签： javascript jquery css slidetoggle

【解决方案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>

【讨论】：