jQuery:链接无法在启用 jQuery 的情况下工作

Question

我有一个侧面垂直菜单，带有子页面(子 <ul> )。我有一个非常好的 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>      

Answer 1

问题是因为 return false; 阻止了所有 A 标记的常见链接点击行为，而不仅仅是标题中的标记。试试这个:

HTML

<li class="active"><a href="" class="heading">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>

JS

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

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

Fiddle to prove the theory