Аккордеонный скрипт не работает с barba.js

Question

Аккордеонный скрипт не работает с barba.js

Вот основной код:

<body>
<div id="barba-wrapper" class="main">
    <div class="barba-container">

        <div class="accordion">
            <div class="accord-header">link</div>
            <div class="accord-content">content</div>
        </div>

        <script src="/scripts/jquery-3.3.1.min.js"></script>
        <script src="/scripts/barba.min.js"></script>
        <script src="/scripts/scripts.js"></script>

        <script>
        $(".accordion .accord-header").click(function() {
            // for active header definition
            $('.accord-header').removeClass('on');
            $(this).addClass('on');
            // accordion actions
            if($(this).next("div").is(":visible")){
                $(this).next("div").slideUp(300);
                $(this).removeClass('on');
            } else {
                $(".accordion .accord-content").slideUp(300);
                $(this).next("div").slideToggle(300);
            }
        });
        </script>

    </div><!-- barba-wrapper -->
</div><!-- barba-container -->
</body>

Проблема в том, что при первой загрузке страницы гармошка работает нормально. Но когда вы переходите на другую страницу и затем возвращаетесь, скрипт больше не работает. Я попытался добавить в конец scripts.js:

Barba.Dispatcher.on('newPageReady', function(currentStatus, oldStatus, container) {
    eval(container.querySelector("script").innerHTML);
});

Как они предполагают, но это не помогло.

0

accordion barbajs

Источник

user3378776 18 июл '19 в 05:58

1 ответ

Другие вопросы по тегам accordion barbajs

user3378776 18 июл '19 в 07:10 2019-07-18 07:10 · Answer 1 · 2019-07-18 07:10

Решена . Проблема заключалась в том, где я это ставил. Вместо того, чтобы поместить его в конец скрипта barba, я добавил это прямо перед:

Barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {

            $(".accordion .accord-header").click(function() {
                // for active header definition
                $('.accord-header').removeClass('on');
                $(this).addClass('on');
                // accordion actions
                if($(this).next("div").is(":visible")){
                    $(this).next("div").slideUp(300);
                    $(this).removeClass('on');
                } else {
                    $(".accordion .accord-content").slideUp(300);
                    $(this).next("div").slideToggle(300);
                }
            });

        });

    });

}(Barba, jQuery));

Важной частью является то, что он был добавлен до

}(Barba, jQuery));

это было уже там, чтобы закончить оригинальный код, а не после этого.