Question

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

基本上，我希望能够在链接上单击一次并将其转到正确的页面，但我还要单击项目符号并将其扩展到子类别。我一直在研究如何将子弹与李的内容分开，但它似乎并不适用于我的情况，可能是因为我的李含有很多子类别。这是一个例子：

<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无效。您的div内无法ul。此外，通过将每个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; }移除子弹，然后添加自己的子弹•角色•（MAC上的alt-8）。在a元素中添加该字符，如下所示：

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

标签现在位于元素之外。

希望这适合你！

只制作子弹可点击

4 个答案: