Question

这是基本代码：

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

如他们所建议，但没有帮助。

Answer 1

解决了。问题是我放在哪里。我没有将其放在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));

已经可以用来结束原始代码了，而不是在那之后。

手风琴脚本不能与barba.js一起使用

1 个答案: