javascript - 检查单击的元素类型

标签 javascript jquery

我有一个 div,我想要扩展/收缩(链接除外)。我有以下代码,它可以工作但没有异常。确保 div“expandablediv”中的所有元素和区域都与 jquery 一起展开/收缩的最有效方法是什么,元素除外。

$("#expandablediv").click(function () {
                if ($("#withinexpandlediv").is(":hidden")) {
                    $("#withinexpandlediv").fadeIn(50);
                }
                else {
                    $("#withinexpandlediv").fadeOut(50);
                }
            });

HTML 代码:

<div id="expandablediv" >
    <div class="ddImage">
        <img src="rightArrow.png" alt="Title">
    </div>
    <div class="ddText">
        Title
    </div>
    <div id="withinexpandlediv" >
        Text contains one or more <a href="mailto:email@links.com"> email links.</a>
    </div>
</div>

最佳答案

如果您不想让链接触发切换,请使用 event.target.nodeName :

        $("#expandablediv").click(function (e) {
            if (e.target.nodeName == "A") { return; }
            //if ($(e.target).is('a')) { return; } // also works

            if ($("#withinexpandlediv").is(":hidden")) {
                $("#withinexpandlediv").fadeIn(50);
            }
            else {
                $("#withinexpandlediv").fadeOut(50);
            }
        });

节点名称:http://jsfiddle.net/m7vpk/

is(): http://jsfiddle.net/FQuzt/

关于javascript - 检查单击的元素类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17797038/

相关文章:

javascript - 如何使用 vis.js 强制边缘方向?

javascript - 单击表格单元格时,获取隐藏的 div 以显示在表格单元格下方

javascript - 带有 setTimeout 的递归 JS 函数

由于 adblock,Javascript Ajax 请求在 chrome 中失败,我有什么选择?

javascript - 单击 jQuery 时删除或添加额外的类

javascript - Vue.js:仅当路由参数发生变化时无法触发组件准备就绪

javascript - 使文本拉伸(stretch) 100%

javascript - 如何通过箭头键 jquery 移动 img

javascript - "jQuery is not defined"在 Webpack 4 中使用 ES6 时需要/导入后

javascript - 单击按钮时如何聚焦下一个文本字段?