Question

我正在使用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>

所以即使子菜单被扩展但链接仍然正确，链接也是正确的。

Answer 1

尝试以下方法：

将菜单更改为：

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

Answer 2

您需要使用return true;启用“a”的默认行为。我在你的HTML中添加了一些类，并稍微改了一下javascript。

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

我确实发现如果你向'a'添加一个click事件处理程序，它将加载页面。事件处理程序根本不需要做任何事情。

Answer 3

切换似乎会覆盖链接，您可能需要找到一个更具体的过滤器来仅切换带有子菜单的过滤器。

Answer 4

链接是否全部可行，但是他们在任务栏的某处刷新了一个不同的特定浏览器窗口（一个名为“内容”的窗口）？

Answer 5

尝试使用

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

OFC你必须有一个名为hidden的css类，它包含display：none;

或沿着这些方向的东西，取决于你想要隐藏的东西

jquery show / hide break链接

5 个答案: