Question

我正在制作一些非常通用的东西 - 只是一个可折叠的菜单列表，实际上我正在尝试模仿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>

有人可以帮忙吗？

Answer 1

您的HTML无效。您需要确保每个开头＆lt; a＆gt;标记您只有一个匹配的结束标记：＆lt; / a＆gt;

Answer 2

正如buh buh所说，你的标记有几个错误。您已关闭</a>代码，但没有匹配的开启工具，并打开<a>代码，但没有匹配的代码。你也可以简化它。您不需要<div>，因为<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/

Answer 3

您的语法已损坏。您的a.menu-collapse代码只是打开，但不会关闭。

作为旁注，您需要div.admin-submenu吗？或者你可以将admin-submenu类提供给嵌套的ul吗？此外，嵌套a内的li也是多余的。你不应该为了外观或Javascript而需要它。

slideToggle打开元素，但不关闭它

3 个答案: