Question

我有一个格式为无序列表的菜单，其中链接（而不是列表项）的背景图像看起来像子弹。由于CSS的复杂性，我无法改变这一点 - 背景图像必须属于＆＃34;属于＆＃34;到链接，而不是列表项。

我的问题是，我希望能够将链接指向我们各自的页面，同时还有背景图像可以扩展子类别。这意味着我需要以某种方式＆＃34;分开＆＃34;来自链接的背景图像，以便在我的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

您可以检查点击的点以查看它是否在图标的区域中，实际上我们只需检查水平坐标即可。我们知道您为padding-left:15px元素设置a，这意味着图标的宽度约为15px。如果点击的点在图标的区域中，我们将传播click事件，否则阻止它传播。

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

Demo.

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％正常工作！...祝你好运。

链接不可点击的背景图像

3 个答案:

Demo.