链接不可点击的背景图片

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。 如果单击的点在图标的区域中，则将让click事件传播，否则将阻止其传播。

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

演示。

Answer 2

您可以将背景图像发送到伪元素中，并使用指针事件，以免引起点击。

DEMO

#mainnav a {
    margin-left: 20px;
    background-repeat: no-repeat;
}
#mainnav a:before {
    content: url(http://shapeshed.com/images/articles/pencil_icon.gif);
    margin-left: -20px;
    margin-right:5px;
    pointer-events:none;/* this is where it happens if browser understands it */
    vertical-align:middle;
}
#mainnav ul {
    list-style-type: none;
}
#mainnav ul ul {
    display: none;
}

Answer 3

只需在链接旁边添加另一个带有铅笔图像的链接，其中包含一个唯一的类，它将打开嵌套的ul，如下所示：

<ul>
    <li>
        <a href="#" class="pencil"><img src="pencil.jpg"></a> <a href="any url">Click me</a>
        <ul style="display:none" class="nested_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>  

jQuery的：

$(document).ready(function() {
    $('.pencil').click(function(e) {
        e.preventDefault();
        $(this).parent().children(".nested_ul").slideToggle("slow", "linear");
    });
 });

这是100％正常工作！...祝您好运。