jQuery:启用jQuery时链接不起作用

我有一个侧面垂直菜单，子页面子。我有一个非常好的jQuery slideToggle特性，它可以扩展菜单来显示子页面。尽管当这个jQuery以菜单为目标时，子页面的链接中没有一个是有效的。当我关闭JS时，它工作正常。我已经玩了大约一个小时了。任何帮助都将不胜感激

// SIDE BAR MENU EXPAND

$('#left-menu ul li').click(function() {
    $(this).children("ul").slideToggle("slow");
    return false; });

HTML：

<div id="left-menu">
                                                            <!-- first level sub-sections -->

<ul>
<li class="active"><a href=">Leather Goods &#187;</a>
   <ul>
       <li><a href="">Handbags</a></li>
       <li><a href="">Laptop &amp; Briefcase</a></li>
       <li><a href="">Pen Cases </a></li>
   </ul>
</li>

<li><a href="">Stationery</a>
    <ul>
       <li><a href="">A4</a></li>
       <li><a href="">A5</a></li>
       <li><a href="">A6</a></li>                                                                    
    </ul>
</li>
                                                                                                <li><a href="">Writing Instruments</a>
    <ul>
       <li><a href="">Accessories</a></li>
       <li><a href="">Ballpoint Pens</a></li>
    </ul>
</li>
</ul>
                                                                        </div>      

---

这是因为slideToggle函数将样式显示：块和z索引设置为高于当前使用的样式。因此，只需将正确的样式本地添加到标记或使用！在CSS中很重要

---

也不要使用return false。

问题是因为return false；正在阻止所有A标记的常规链接单击行为，而不仅仅是标题中的标记。试试这个：

HTML

---

尝试将选择器更改为$'left-menu>ul>li'

我认为您的问题在于

$'left-menu ul li'针对ul嵌套的li类型的所有嵌套元素。对于直接父子关系，请使用$'left-menu>ul>li'

您应该注意的另一件事是，从嵌套项向上冒泡的事件只有在使用jquery event.preventDefault或返回false的过程中未阻止其默认行为时，才会按照您的情况下的链接获得其默认行为

因此，即使选择了正确的元素，也需要验证在事件冒泡时没有阻止默认行为。

问题的原因 问题是由javaScript中的事件传播引起的。当您在ulli上返回false时，所有内部单击事件都将取消默认行为-这是一个正常的html链接

解决方案 您需要使用event.target来判断它是否是您想要停止案例中默认行为的链接，它只是用作列表标题的a。我使用event.target.href==来发现这种锚。看

html

<li class="active">
   <a href="#">Leather Goods &#187;</a>
   <ul>
       <li><a href="">Handbags</a></li>
       <li><a href="">Laptop &amp; Briefcase</a></li>
       <li><a href="">Pen Cases </a></li>
   </ul>
</li>

---

@Guy，这也可能有助于确保链接样式具有display:block；所有href attributes href=的href中都有一个值，我删除了它们，因为网站正在开发中，可以；Rory，谢谢，但这会导致非子菜单崩溃，链接仍然不起作用。我还尝试了另一个家伙建议的方法，记住返回错误；来自js。这使得链接正常工作，但当你点击一个链接时，菜单立即崩溃。@伙计，你说得对-我的逻辑有一个缺陷。我已经用正确的解决方案修改了我的答案，并添加了一个提琴，这样你就可以看到它工作了。这仍然会导致同样的问题，当你点击其中的一个链接时，就会立即折叠菜单。所以你建议将CSS目标左菜单ul li设置为较低的z索引？这就是我现在所拥有的，它正在使链接工作，但现在扩展/折叠不起作用。$'左菜单>ul>li'。单击函数{$this.childrenul.slideToggleslow；if！$this.hassclassheading；}；越靠近，JS就越有效。它现在做的唯一一件事就是将子菜单折叠到您单击的链接。您的意思是将手提包、笔记本电脑和笔套折叠到皮具上吗？它已经在这方面发挥了作用。注意，我在标题中添加了每个锚

$('#left-menu ul li a').click(function(e) {
    if ($(this).hasClass("heading")) {
        e.preventDefault();
    }

    $(this).next("ul").slideToggle("slow");
});

<li class="active">
   <a href="#">Leather Goods &#187;</a>
   <ul>
       <li><a href="">Handbags</a></li>
       <li><a href="">Laptop &amp; Briefcase</a></li>
       <li><a href="">Pen Cases </a></li>
   </ul>
</li>

$('#left-menu ul > li').click(function(event) {
    $(this).children("ul").slideToggle("slow");
    if(event.target.href === '#') return false; });