javascript - 仅使元素符号可点击

Question

我正在开发一个使用无序列表设计的菜单，每个列表元素都包含指向另一个页面的链接。但是，我还希望能够单击每个元素符号点以打开更多子类别，这些子类别也将链接到其他页面。

基本上，我希望能够在链接上单击一次并将其转到正确的页面，但我还想单击要点并将其扩展到子类别中。我一直在研究如何将元素符号与 li 的内容分开，但在我的情况下似乎不起作用，可能是因为我的 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 无效。 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，那么您可以使用事件目标来处理没有 a 的 li 。像这样:

演示 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
});