只制作子彈可點擊

Question

我正在使用無序列表設計的菜單，每個列表元素包含指向另一個頁面的鏈接。 但是，我還希望能夠點擊每個項目符號點以打開更多子類別，這些子類別也將鏈接到其他頁面。

從本質上講，我希望能夠在鏈接上單擊一次並將其轉到正確的頁面，但我還要點擊項目符號並將其擴展到子類別。 我一直在研究如何將子彈與李的內容分開，但它似乎並不適用於我的情況，可能是因為我的li包含很多子類別。 這是一個例子：

<li id="m2l1" class="child">
    <a href="#">Y</a>
        <ul id="u11">
            <li class="gchild"><a href="#">Y.1</a></li>
            <li class="gchild"><a href="#">Y.2</a></li>
            <li class="gchild"><a href="#">Y.3</a></li>
            <li class="gchild"><a href="#">Y.4</a></li>
            <li class="gchild"><a href="#">Y.5</a></li>
            <li class="gchild"><a href="#">Y.6</a></li>
            <li class="gchild"><a href="#">Y.7</a></li>
            <li class="gchild"><a href="#">Y.8</a></li>
            <li class="gchild"><a href="#">Y.9</a></li>
        </ul>
</li>

有沒有人對如何在我的案子中將子彈與文本分開提出任何建議？

這是鏈接： http ： //jsfiddle.net/stamblerre/XYp48/17/

謝謝！！！

Answer 1

仍然更改列表以隱藏項目符號，然后將您的html修改為：

<li class="gchild"><a href="#">&bull;</a>Y.1</li>

應該做的伎倆。

Answer 2

您的HTML無效。 你的ul里面不能有div 。 此外，通過將每個li單獨邏輯移動到一個通用處理程序中，您可以大大簡化代碼。

像這樣的東西：

演示： http ： //jsfiddle.net/abhitalks/XYp48/18/

CSS ：

ul {
    display: none;
    overflow: hidden;
}
ul:first-child {
    display: block;
}

JS ：

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

編輯 ：

我故意不檢查a因為單擊a會導航到相應的頁面（如問題中所述），因此展開/折疊無關緊要。

然而，按您的評論，如果你真的想刪除a從處理器完全，那么你可以使用活動對象來處理li沒有a 。 像這樣的東西：

演示2： http ： //jsfiddle.net/abhitalks/XYp48/22/

JS ：

$("li").on("click", function (e) {
    var $t = $(e.target); // get the event target as a jQuery object
    if (!$t.is('a')) { // check if the target is not an anchor
        $(this).children("ul").slideToggle();
        return false;
    }
    // otherwise if target is anchor, then do nothing
});

Answer 3

<a href="#"><li class="gchild">Y.1</li></a>

Answer 4

一種對我有用的方法：用li { list-style-type: none; }刪除子彈 li { list-style-type: none; }然后使用字符•（在Mac上的ALT-8）添加自己的子彈。 在像這樣a元素中添加該字符：

<a href="">•</a> X

標簽現在在元素之外。

希望這對你有用！