Question

我有一个侧面垂直菜单，带有子页面（sub <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

Answer 2

这是因为slideToggle（）函数将样式显示：block和z-index设置为当前正在使用的内容。因此，只需在本地添加正确的样式到您的标签或在CSS中使用！important。

也不要使用return false。

Answer 3

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

Answer 4

我认为你的问题是

$('#left-menu ul li')针对的是由ul嵌套的所有类型为li的嵌套元素。对于直接父母子女关系，请使用$('#left-menu > ul > li')

你应该注意的另一件事是，从嵌套项向上冒泡的事件只会获得它们的默认行为（在你的情况下是链接），如果它们的默认行为没有被阻止（使用jquery event.preventDefault（或者通过返回false）这就是你所做的。

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

Answer 5

问题的原因

您的问题是由javaScript中的事件传播引起的。当return false上的ul li时，所有内部click事件都会取消默认行为 - 这是一个普通的html链接。

解决方案

您需要使用event.target来判断它是否是您想要停止默认行为的链接（在您的情况下，它只是一个用作列表标题）。我使用event.target.href === '#'来发现这种锚点。见http://jsfiddle.net/yangchenyun/9fNKD/

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>

js

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

jQuery：链接无法启用jQuery

5 个答案:

问题的原因

解决方案