点击标签时不要运行jQuery函数

I currently work with some jQuery, where i have got some problems.

我目前正在使用一些jQuery,我遇到了一些问题。

I got this code

我有这个代码

if ($(".accordion").length > 0) {
    $(".accordion").each(function() {
        var item = $(this).find(".accordion-text");
        var height = item.outerHeight() + 20;
        item.data("height", height + "px").css("height", "0px");
    })
}



$(".accordion").on("click", function(e) {

    foldOut($(this));

});

function foldOut(accordien) {
    console.log(accordien);
    var item = $(accordien).find(".accordion-text");

    if ($(accordien).hasClass("accordion-open")) {
        $(item).stop().transition({
            height: '0px'
        }, 500, 'in-out');
        $(accordien).find(".accordionArrow").removeClass("accordionBgActive");
        console.log($(accordien).find(".accordionArrow"));
    } else {
        $(accordien).find(".accordionArrow").addClass("accordionBgActive");
        $(item).stop().transition({
            height: item.data("height")
        }, 500, 'in-out');
    }

    $(accordien).toggleClass("accordion-open");
}

But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div.. How can i get the div not to fold when the click is on an a tag?

但是在折叠的div里面,可能有一个标签,当我点击一个标签时它会打开链接但也会折叠div ..如果点击是在一个点上,我怎么能让div不折叠一个标签?

HTML Where its "closed"

HTML“关闭”的地方

<div class="row">
        <div class="overflow-hide rel">
            <div class="accordion rel col-md-12 no-pad">
                <div class="accordionHeaderDiv">
                    <h3>Test</h3>
                    <div class="accordion-header-teaser">
                        <p>TestTestTestTestTestTestTestTestTestTest</p>
                    </div>
                </div>
                <div class="accordion-text" style="height: 0px;">
                    <p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
                    <p><a href="/" target="_blank" title="ZBC">Test</a></p>
                </div>
                <div class="accordionArrow" style="   position: absolute; top: 0;  cursor: pointer;  right: 43px; height: 30px;"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>

1 个解决方案

#1

Filter it out regarding event target:

根据事件目标筛选出来:

$(".accordion").on("click", function(e) {
    if(e.target.tagName.toLowerCase() === "a") return;
    foldOut($(this));
});

As anchor can contains other contents, a more relevant way would be:

由于锚可以包含其他内容,因此更相关的方法是:

$(".accordion").on("click", function (e) {
    if ($(e.target).closest('a').length) return;
    foldOut($(this));
});

#1