javascript - 子导航不指向页面（jquery）

Question

我有下拉导航、嵌套列表的基本标记。

用户将单击顶部导航项，这将打开子导航，但我的子导航链接不起作用。

它在 CMS 中，所以我必须在那里有占位符页面的链接。

标记：

<ul class="navtop">
<li><a href="">Who</a>
  <ul>
     <li><a href="">Sub Item 1</a></li>
     <li><a href="">Sub Item 2</a></li>
     <li><a href="">Long Sub Item 3</a></li>
     <li><a href="">Sub Item 4</a></li>
  </ul>
</li>
<li><a href="">What</a>
  <ul>
     <li><a href="">Sub Item 1</a></li>
     <li><a href="">Sub Item 2</a></li>
     <li><a href="">Long Sub Item 3</a></li>
     <li><a href="">Sub Item 4</a></li>
  </ul>
</li>
</ul>

Javascript：

$(".navtop li").click(function(){
    $(this).toggleClass("show");        
    $(this).siblings(".show").toggleClass("show");
    return false;
});

CSS：

#headernav .navtop li.show ul
{
display: block;
}

我尝试为 $(".navtop li ul li a") 添加“return true”，但没有成功。建议？

Answer 1

为什么你对 LI 点击返回 false？我相信这就是问题所在。

如果你把它拿出来，一切都应该正常。

如果这不起作用，请记住您将单击事件附加到每个 LI 而不仅仅是顶级 LI。试试这个：

$(".navtop > li").click(function(){
        $(this).toggleClass("show");            
        $(this).siblings(".show").toggleClass("show");
});

Answer 2

原来这行得通：

$(".navtop > li > a").click(function(){
    $(this).parent('li').toggleClass("show");       
    $(this).parent('li').siblings(".show").toggleClass("show");
    return false;
});