javascript - 与不可点击的背景图片链接

Question

我有一个格式为无序列表的菜单，其中链接(而不是列表项)有一个看起来像元素符号的背景图像。由于 CSS 的复杂性，我无法更改这一点 - 背景图像必须“属于”链接，而不是列表项。

我的问题是，我希望能够让链接将我定向到它们各自的页面，同时让背景图像能够扩展子类别。这意味着我需要以某种方式将背景图像与链接“分开”，以便在我的 jQuery 动画中单独引用它。

我希望能够做这样的事情:

$( document ).ready(function() {
    $("#mainnav ul li").on("click", function(e) {
        var $t = $(e.target);
        if (!$t.is("a")) {
            $(this).children("ul").slideToggle("slow", "linear");
            return false;
        }
    });
});

因为现在我只是在使用它，当我真正想点击链接时它不起作用:

$("#mainnav ul li").click(function () {
    $(this).children("ul").slideToggle();
    return false;
});

我附上了一个演示(但请记住，这不是我的实际代码，它只是我希望它如何工作的一个示例):http://jsfiddle.net/stamblerre/GzD3M/11/

我希望能够单击“仅铅笔”来展开子类别，这样我就可以使用文本单击链接并被定向到另一个页面。有没有人知道如何将背景图像与列表项而不是链接相关联？

谢谢!!

---

在这个线程中许多人的帮助下，我已经解决了我的问题，这里是解决方案:http://jsfiddle.net/stamblerre/GzD3M/19/

Answer 1

可以查看点击点是否在图标区域内，其实我们只需要查看横坐标就可以了。我们知道您为 a 元素设置了 padding-left:15px，这意味着图标的宽度约为 15px。如果点击点在图标的区域内，我们将让点击事件传播，否则停止传播。

$('#mainnav ul li > a').click(function(e){
    if(e.pageX - $(e.target).offset().left >= 15) {
        e.preventDefault();
        e.stopPropagation();            
    }
});

Demo.