Как предотвратить открытие, закрытие слайдшоу при первом нажатии - PullRequest
Новая
       48

Как предотвратить открытие, закрытие слайдшоу при первом нажатии

2 голосов
/ 04 октября 2019

У меня есть 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, не нажимая дважды?

1 Ответ

0 голосов
/ 04 октября 2019

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>
...