Question

我喜欢3块，它们在PC版上完美运行，它们在点击时关闭并打开但是我有移动版本的问题，当我点击其中一个它打开但它没有关闭时，它关闭就在我点击另一个块的时候。如果我再次点击已经打开的同一个块，它就会重新打开它。我无法关闭它，我不知道为什么。请帮忙!!

<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(); } }); });

这样，您可以为每个hero元素注册一次单击处理程序。仅在触发单击事件时才会检查屏幕分辨率。

对不起，如果我没有正确理解问题，我希望它有所帮助。

如何在第二次点击时关闭？

1 个答案: