子导航不定向到页面（jquery）

发布于 2024-07-15 23:36:58 字数 1221 浏览 4 评论 0原文

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

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

它位于 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”，但它不起作用。建议？

原文

I have basic markup for a drop down nav, nested lists.

The user will click on the top nav item, which will open up the sub nav, but my sub nav links aren't working.

It is in a CMS so I must have the links for the placeholder pages there.

Markup:

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

I tried adding a 'return true' for $(".navtop li ul li a") but it didn't work.
Suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

帅气尐潴 2024-07-22 23:36:58

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

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

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

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

Why are you return false to the LI click? I believe that's the problem.

If you take that out, everything should work fine.

If that doesn't work, bear in mind you're attaching the click event to every LI instead of just the top level LIs. Try this instead:

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

回复收藏 0 原文

怀中猫帐中妖 2024-07-22 23:36:58

事实证明这有效：

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

Turns out this worked:

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

回复收藏 0 原文

~没有更多了~