手风琴JS超链接传播

如何解决手风琴JS超链接传播

我正在一个网站上工作，每个页面上都有多个手风琴，并带有下载链接。我找到了Ahmet Aksungur制作的漂亮的手风琴，但是这些超链接不适用于他的代码。我尝试添加了preventDefault（）和stopPropagation（）-$ .on（'click'，'a'，function（e）{e.stopPropegation（）;}）– –这项工作很棒（一次！）–但是问题在于，初次下载后，手风琴或下载链接均无效。 任何人都可以建议一种在事件中停止传播并允许其余手风琴正常运行的方法。谢谢。

codepen：https://codepen.io/doncroy/pen/abZBZyL

'''

<script>
(function () {
    "use strict";
    var jQueryPlugin = (window.jQueryPlugin = function (ident,func) {
        return function (arg) {
            if (this.length > 1) {
                this.each(function () {
                    var $this = $(this);

                    if (!$this.data(ident)) {
                        $this.data(ident,func($this,arg));
                    }
                });

                return this;
            } else if (this.length === 1) {
                if (!this.data(ident)) {
                    this.data(ident,func(this,arg));
                }

                return this.data(ident);
            }
        };
    });
})();

(function () {
    "use strict";
    function Accordion($roots) {
        var element = $roots;
        var accordion = $roots.first("[data-accordion]");
        var accordion_target = $roots.find("[data-accordion-item]");
        var accordion_content = $roots.find("[data-accordion-content]");
        $(accordion_target).click(function () {
            $(this).toggleClass("opened");
            $(this).find(accordion_content).slidetoggle("slow");
            $(this).siblings().find(accordion_content).slideUp("slow");
            $(this).siblings().removeClass("opened");
        });
    }
    $.fn.Accordion = jQueryPlugin("Accordion",Accordion);
    $("[data-accordion]").Accordion();

    function Ripple_Button($root) {
        var elements = $root;
        var ripple_btn = $root.first("[data-ripple]");
        $(ripple_btn).on("click",function (event) {
            event.preventDefault();
            var $div = $("<div/>"),btnOffset = ripple_btn.offset(),xPos = event.pageX - btnOffset.left,yPos = event.pageY - btnOffset.top;
            $div.addClass("ripple-effect");
            $div.css({
                height: ripple_btn.height(),width: ripple_btn.height(),top: yPos - $div.height() / 2,left: xPos - $div.width() / 2,background: ripple_btn.data("ripple") || "#ffffff26"
            });
            ripple_btn.append($div);

            window.setTimeout(function () {
                $div.remove();
            },2000);
        });
    }
    $.fn.Ripple_Button = jQueryPlugin("Ripple_Button",Ripple_Button);
    $("[data-ripple]").Ripple_Button();
})();
</script>

''' '''

<div class="container">
    <div class="aks-accordion" itemscope itemtype="https://schema.org/FAQPage" data-accordion="">
        <div class="aks-accordion-row">
            <div class="aks-accordion-item" itemscope itemprop="mainEntity" itemtype="https://schema.org/Question" data-accordion-item="" data-ripple="#2c612c26">
                <div class="aks-accordion-item-row">
                    <div class="aks-accordion-item-icon">
                        <svg class="aks-accordion-item-icon-open" viewBox="0 0 512 512">
                            <path d="M492,236H276V20c0-11.046-8.954-20-20-20c-11.046,0-20,8.954-20,20v216H20c-11.046,20s8.954,20,20h216
            v216c0,11.046,8.954,20s20-8.954,20-20V276h216c11.046,20-8.954,20-20C512,244.954,503.046,236,492,236z" />
                        </svg>
                        <svg class="aks-accordion-item-icon-close" viewBox="0 0 512 512">
                            <path d="M492,236H20c-11.046,20c0,20h472c11.046,20-20S503.046,236z" />
                        </svg>
                    </div>
                    <div class="aks-accordion-item-title">
                        <h4 itemprop="name">Dropdown Title</h4>
                    </div>
                </div>
                <div class="aks-accordion-item-content" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer" data-accordion-content="">
<li><div id="#" onclick='recordVisit(this.id,"link")'><a href="example.com" download="#"><i class="fas fa-file-download"></i>PLACEHOLDER</a></div></li>
<li><div id="#" onclick='recordVisit(this.id,"link")'><a href="example.com" download="#"><i class="fas fa-file-download"></i>PLACEHOLDER</a></div></li> 
              </div>
            </div>
        </div>
    </div>
</div>

'''

解决方法

我找到了答案。将stopPropagation（）写入JS的问题在于，它在全球范围内影响了手风琴。解决方案是在每个链接上使用内联onclick事件。

<li><div id="#" onclick='recordVisit(this.id,"link"); event.stopPropagation();'><a href="example.com" download="#"><i class="fas fa-file-download"></i>PLACEHOLDER</a></div></li>