个人中心
gpt4 book ai didi

javascript - 如何防止 slideToggle 打开然后在第一次单击时关闭

转载 作者：行者123 更新时间：2023-11-28 12:28:50 25 4
gpt4 key购买 nike

我有一个 slideToggle，它给我一个 Accordion 式的功能。这一切都很好，除了第一次点击短暂显示内容 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 而无需点击两次？

最佳答案

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>

关于javascript - 如何防止 slideToggle 打开然后在第一次单击时关闭，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58240157/

25 4 0
文章推荐： javascript - D3 强制布局 - 如何实现节点的 3D 外观？
文章推荐： swift - 通用协议(protocol)方法 swift 无法将类型识别为类型
文章推荐： ios - 使用 webview 显示托管在 URL 上的直播 channel
文章推荐： ios - UIScrollView 无法水平滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com