javascript - 通过单击标题触发 Accordion 链接的单击

Question

我的触发器有一些问题。实际上，我希望我的 Accordion 折叠起来，不仅通过单击链接，还单击整个标题面板。这是我的标题代码

<div class="accordion-head" role="tab">
    <div class="head-title">
        <div>
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#accordion-body">Commande n°240A
            </a>
        </div>
        <div class="date-cmd">
            02/04/2017
        </div>
    </div>
    <div class="head-arrow">
       <i style="display: none;" class="fa fa-angle-right fa-2x"></i>
       <i class="fa fa-angle-down fa-2x"></i>
    </div>
</div>

这是我的 Javascript 代码

$('.accordion-head').on("click", function (){
    $(this).find('a').trigger("click");
});

但是它不起作用。我使用“$(this)”因为我想以独特的方式访问链接(还有其他 Accordion )感谢您的帮助。

我用我的所有代码添加了一个 fiddle https://jsfiddle.net/ws7rb68z/4/

Answer 1

它不起作用的原因是因为 anchor 元素位于 Accordion 标题内部。因此，当触发 anchor 的点击时，它会“点击”标题，然后再次触发 anchor 的点击，从而导致点击的无限循环。为了防止这种情况，当单击标题时，请检查单击是否位于 anchor 内部。类似于以下内容:

$('.accordion-head').on("click", function (event){
    if(!$(event.target).closest('a').length) {
        $(this).find('a').trigger("click");
    }
});

您提供的 JSFiddle 中的示例:https://jsfiddle.net/ws7rb68z/5/