鏈接不可點擊的背景圖片

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