jQuery的show/hide破坏了链接

Question

jQuery的show/hide破坏了链接

3

我正在使用CSS和jQuery制作一个垂直导航菜单，使子菜单默认处于隐藏状态，但点击菜单项可展开以显示子菜单。

<div id="navmenu">


<ul id="menu">
  <li><a href="welcome.html" target="content">Welcome</a>
    <ul class="hide">
     <li><a href="other.php" target="content">blank</a> </li>    
    </ul>  
  </li>

  <li><a href="view_form.php" target="content">Student Nurse</a></li>
  <li><a href="http://www.google.com" target="content">Internet</a></a></li>
  <li><a href="http://support.site" target="content">Support</a></li>
  <li><a href="">Policies</a>
   <ul class="hide">
    <li><a href="shared/Policies/ContactList.txt" target="content">Policy 1</a></li>   
   </ul>  
  </li>  
 </ul>
</div>

用jQuery实现子菜单的显示和隐藏：

$('#menu li').css("margin-left","20px");

$('#menu li').toggle(
 function() {
            $(this).find('ul').show();
     },
     function() {
           $(this).find('ul').hide();
 });

这段代码可以完美地展开和折叠子菜单，但是现在没有任何链接能够工作？我不明白我错过了什么？

编辑：firebug 输出：

<div id="navmenu">
   <ul id="menu">
    <li style="margin-left: 20px;">
       <a target="content" href="welcome.html">Welcome</a>
       <ul class="hide">
         <li style="margin-left: 20px;">
            <a target="content" href="view_form.php">a blank one here</a>
         </li>
       </ul>
     </li>
     <li style="margin-left: 20px;">
         <a target="content" href="view_form.php">Student Nurse</a>
     </li>
     <li style="margin-left: 20px;">
        <a target="content" href="http://www.google.com">Internet</a>
     </li>
     <li style="margin-left: 20px;">
       <a target="content" href="http://support.site">Support</a>
     </li>
     <li style="margin-left: 20px;">
        <a href="">Policies</a>
        <ul class="hide">
          <li style="margin-left: 20px;">
            <a target="content" href="shared/Policies/ContactList.txt">Policy 1</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>

所以，即使子菜单展开时链接也是正确的，但它们仍然无法正常工作。

- Matt Phillips

3

您的页面上是否有一个名为“content”的框架？ - Sinan

如果我从第一个ul中删除id="menu"部分，链接就可以正常工作，但显然我会失去可扩展的列表。 - Matt Phillips

5个回答

2

您需要使用return true;启用'a'的默认行为。我给您的HTML添加了一些类，并稍微更改了javascript。

编辑：删除解决方案，因为出现其他问题。

我发现如果将click事件处理程序添加到'a'，它将加载页面。事件处理程序不需要执行任何操作。

- user113716

0

使用它尝试一下

$('#menu li').toggleClass('hidden', 0);

当然，你必须有一个名为“hidden”的CSS类，其中包含display:none;或者类似的东西，具体取决于你想要隐藏什么。

- Mathias Nielsen

这给我带来了和之前一样的结果。当你点击菜单项时，子菜单会展开和收缩，但点击子菜单项并不会跳转到链接。 - Matt Phillips

0

切换似乎覆盖了链接，您可能需要找到更具体的过滤器，仅切换那些带有子菜单的内容。

- Steven Pardo

但是甚至子菜单链接也无法使用了。就好像它们不再是链接一样。 - Matt Phillips

1

使用Firebug来确保。或者发布一个实时链接供我们检查。 - Pekka

0

可能链接都是有效的，但它们正在刷新任务栏中某个特定的浏览器窗口（名为“内容”）吗？

- Pekka

该页面包含一个框架，左侧是菜单框架，右侧是“内容”框架，其中包含链接指向的内容。正如我在上面的评论中所说，当我去掉jQuery时，我知道链接是有效的，但这违背了我的目的，因为那样我就没有展开菜单了。 - Matt Phillips

好的。你能用Firebug看看a元素发生了什么吗？比如，它们是否失去了href，或者其他东西移动到它们上面使它们无法点击？ - Pekka

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Steven Pardo · Accepted Answer

请尝试以下操作：将菜单更改为：

<div id="navmenu">
 <ul id="menu">
  <li><div><a href="welcome.html" target="content">Welcome</a></div>
    <ul class="hide">
     <li><a href="other.php" target="content">blank</a> </li>    
    </ul>  
  </li>

  <li><a href="view_form.php" target="content">Student Nurse</a></li>
  <li><a href="http://www.google.com" target="content">Internet</a></a></li>
  <li><a href="http://support.site" target="content">Support</a></li>
  <li><div><a href="">Policies</a></div>
   <ul class="hide">
    <li><a href="shared/Policies/ContactList.txt" target="content">Policy 1</a></li>   
   </ul>  
  </li>  
 </ul>
</div>

然后将您的JavaScript更改为以下内容：

$('#menu li:has(ul) > div').toggle(
    function() {
        $(this).next().show();
    },
    function() {
        $(this).next().hide();
    }
);