javascript - 如何让div在第二次点击时关闭？

Question

我有大约 3 个区 block ，它们在 PC 版本上运行得很好，点击后会关闭和打开，但我在移动版本上遇到问题，当我点击其中一个区 block 时，它会打开，但不会关闭，它会关闭只要我点击另一个 block 。如果我再次单击已打开的同一 block ，它只会重新打开它。我无法关闭它，我不知道为什么。如有任何帮助，请!!

<div class="section stats tint">
                <div class="container w-container">
                    <div class="hero-overlay-row w-row">
                            <div class="stats-column w-col w-col-4">
                                <a class="hero-overlay-block-1 w-inline-block" href="#">
                                    <div class="hero-overlay-number">У</div>
                                    <div class="hero-overlay-block-title">УЗО</div>
                                    <p class="link-block-paragraph">Ги брани и прикажува ставовите на учениците.</p>
                                </a>
                            </div>
                        <div class="block-uzo">
                            <h3>УЗО</h3>
                            <p>
                                Училишната Заедница на СУГС Орце Николов претставува легитимно тело составено од претседателите на сите класови,
                                со свое посебно претседателство и организација, основано со цел да ги брани и прикажува ставовите на учениците,
                                да воспоставува легитимна врска помеѓу учениците и училишните служби. Да организира настани, и покренува иницијативи
                                за подобрување на образованието.
                            </p>
                        </div>
                        <div class="stats-column w-col w-col-4">
                        <a class="hero-overlay-block-2 w-inline-block" href="#">
                        <div class="hero-overlay-number">М</div>
                        <div class="hero-overlay-block-title">Мисија</div>
                            <p class="link-block-paragraph">Комуникација и соработка со училишните служби.</p>
                        </a>
                        </div>
                        <div class="block-misija">
                            <h3>Мисија</h3>
                            <p>
                                УЗО  ги застапува потребите и интересите на учениците, преку комуникација и соработка со училишните служби и истовремено
                                поттикнува и придонесува личен развој, преку вклучување на учениците во училишни и вонучилишни активности.
                            </p>
                        </div>
                        <div class="last stats-column w-col w-col-4">
                        <a class="hero-overlay-block-3 w-inline-block" href="#">
                        <div class="hero-overlay-number">В</div>
                        <div class="hero-overlay-block-title">Визија</div>
                            <p class="link-block-paragraph">Подобрување на образованието.</p>
                            </a></div>

                        <div class="block-vizija">
                            <h3>Визија</h3>
                            <p>
                                УЗО е самостојо рамноправно и легитимно тело составено од активни, мотивирани и амбициозни ученици, кое на демократски
                                начин е вклучено во носењето одлуки во соработка со училишните служби.
                            </p>
                        </div></div></div></div>

$(document).ready(function () {
    $(window).on("resize", function (e) {
        checkScreenSize();
    });

    checkScreenSize();

    function checkScreenSize() {
        var newWindowWidth = $(window).width();
        if (newWindowWidth < 768) {
            $(document).ready(function () {
                $('.hero-overlay-block-1').click(function () {
                    $('.block-uzo').slideToggle("slow");
                    $('block-uzo').css('display', 'block');;
                    $('.block-more-1').hide();
                    $('.block-misija').hide();
                    $('.block-vizija').hide();
                });
            });
            $(document).ready(function () {
                $('.hero-overlay-block-2').click(function () {
                    $('.block-misija').toggle("slow");
                    $('.block-misija').css('display', 'block');;
                    $('.block-more-2').hide();
                    $('.block-uzo').hide();
                    $('.block-vizija').hide();
                });
            });
            $(document).ready(function () {
                $('.hero-overlay-block-3').click(function () {
                    $('.block-vizija').toggle("slow");
                    $('block-vizija').css('display', 'block');;
                    $('.block-more-3').hide();
                    $('.block-uzo').hide();
                    $('.block-misija').hide();
                });
            });
        }
    }
});

Answer 1

我不会说俄语，但我会尽力..

您似乎注册了太多的点击处理程序并出现了意外的行为。

关于$(window).on("resize", function (e) { checkScreenSize(); }您正在调用您的checkScreenSize每次调整窗口大小时都会调用此函数，并且在该函数中，您会一次又一次地为每个英雄元素注册一个点击处理程序，如果您的分辨率低于 768，则一次又一次(这就是为什么您仅在移动设备上遇到问题的原因)。

我认为您正在寻找的是这样的:

$(document).ready(function() {
$('.hero-overlay-block-1').click(function() {
if ($(window).width() < 768) {
$('.block-uzo').slideToggle("slow");
$('block-uzo').css('display', 'block');
$('.block-more-1').hide();
$('.block-misija').hide();
$('.block-vizija').hide();
}
});
$('.hero-overlay-block-2').click(function() {
if ($(window).width() < 768) {
$('.block-misija').toggle("slow");
$('.block-misija').css('display', 'block');
$('.block-more-2').hide();
$('.block-uzo').hide();
$('.block-vizija').hide();
}
});
$('.hero-overlay-block-3').click(function() {
if ($(window).width() < 768) {
$('.block-vizija').toggle("slow");
$('block-vizija').css('display', 'block');
$('.block-more-3').hide();
$('.block-uzo').hide();
$('.block-misija').hide();
}
});
});

通过这种方式，您可以为每个英雄元素注册一次点击处理程序。仅当触发点击事件时才检查屏幕分辨率。

抱歉，如果我没有正确理解问题，希望对您有所帮助。