Question

我有两个折叠的 div，我想在单击图像时显示它们。当显示 div 并且我再次单击图像时，我不会再次折叠 div。

我给元素添加了折叠类

<div class="container collapse">'

然后我将 onclick 事件添加到图像以运行我的 Java Script 函数

onclick="playSoundAndShowSpoiler('http://www.url.to/soundfile.mp3',this)

函数本身看起来像

<script>            
        function playSoundAndShowSpoiler(url, obj)
        {
            new Audio(url).play();

            var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
            var collapseList = collapseElementList.map(function (collapseEl) {
            return new bootstrap.Collapse(collapseEl)
            })
        }
    </script>

关于折叠部分的剪辑来自 Bootstrap Docs，我想知道如何更改它以便折叠部分只运行一次并且不会在第二次单击图像时折叠 div。

感谢任何形式的帮助！

最好的碎片罗尔夫

附言供参考 - 这是受影响的网站：https://schmellerling.de/indexnew.php

Answer 1

纯 JavaScript

// better off with targeting element by its ID.
document.getElementById("container").addEventListener("click", function() {
    playSoundAndShowSpoiler();
}, {once: true});

有用链接：https://caniuse.com/once-event-listener

Jquery 方法：

加载 DOM 后，使用 one 方法将处理程序绑定到元素。

function playSoundAndShowSpoiler(url, obj) {
    new Audio(url).play();

    var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
    var collapseList = collapseElementList.map(function (collapseEl) {
    return new bootstrap.Collapse(collapseEl)
    })
}

$("container").one('click', function() {
    playSoundAndShowSpoiler();
});

注意：事件处理函数只对每个元素运行一次。

有用链接：https://api.jquery.com/one/

Bootstrap 折叠元素：在第一次点击时显示 -> 下次什么都不做

1 个答案: