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");
});

Answer 2

这是因为slideToggle()函数将样式display: block和z-index设置在当前使用的样式之上。因此，只需在本地将正确的样式添加到您的标签中，或者在CSS中使用!important。

也不要使用return false。

Answer 3

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