0

我正在制作一些非常通用的东西 - 只是一个可折叠的菜单列表，实际上我正在尝试模仿 wordpress 管理菜单。由于某种超出我理解的原因，我设法让 slideToggle 滑动打开菜单，但是当我再次单击切换锚时它们不会关闭。这是jQuery：

   $(document).ready(function() {   
  $('.menu-collapse').click(function(e){
   e.preventDefault();
   $(this).next('.admin-submenu').slideToggle();
  }); 
   });

这是标记

<ul>
 <li class="top"><a href="" class="menu-item">Dashboard</a></a></li>
 <li class="top"><a href="" class="menu-item">Products</a><a href="" class="menu-collapse">
  <div class="admin-submenu">
   <ul>
    <li class="sub"><a href="">My Products</a></li>
    <li class="sub"><a href="">Add New</a></li>
   </ul>
  </div>
 </li>
 <li class="top"><a href="" class="menu-item">Lists</a><a href="" class="menu-collapse">
  <div class="admin-submenu">
   <ul>       
    <li class="sub"><a href="">Brands</a></li>
    <li class="sub"><a href="">Colors</a></li>       
    <li class="sub"><a href="">Locations</a></li>
    <li class="sub"><a href="">Manufacturers</a></li>
   </ul>
  </div>
 </li>
</ul>

任何人都可以帮忙吗？

4

3 回答 3

2

您的 HTML 无效。您需要确保对于每个开始 <a> 标记，您都有一个完全匹配的结束标记： </a>

于 2010-10-14T15:38:02.303 回答
1

正如 buh buh 所指出的，您的标记有几个错误。您有</a>没有匹配的开启者的结束标签，以及没有匹配的关闭者的开始<a>标签。你也可以稍微简化一下。您不需要<div>s，因为<ul>标签将完美地用作其列表项的容器。尝试使用它作为您的标记：

<ul>
    <li class="top"><a href="" class="menu-item">Dashboard</a></li>
    <li class="top"><a href="" class="menu-item">Products</a>
        <ul class="admin-submenu">
            <li class="sub"><a href="">My Products</a></li>
            <li class="sub"><a href="">Add New</a></li>
        </ul>
    </li>
    <li class="top"><a href="" class="menu-item">Lists</a>
        <ul class="admin-submenu">    
            <li class="sub"><a href="">Brands</a></li>
            <li class="sub"><a href="">Colors</a></li>                          
            <li class="sub"><a href="">Locations</a></li>
            <li class="sub"><a href="">Manufacturers</a></li>
        </ul>
    </li>
</ul>

然后在您的 jQuery 中，将.menu-collapse选择器更改为.menu-item.

这是一个工作演示：http: //jsfiddle.net/Ender/zUf9W/

于 2010-10-14T15:45:19.820 回答
0

你的语法坏了。您的a.menu-collapse标签只会打开，但不会关闭。

作为旁注，您需要div.admin-submenu? 或者你可以把 admin-submenu 类给嵌套的ul？此外，a嵌套的内部li是多余的。外观或 Javascript 都不需要它。

于 2010-10-14T15:40:32.890 回答