javascript - 多级 UL 水平 Accordion

Question

我一直在谷歌上查看大量的水平 Accordion 脚本。

例如: http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/ http://www.nyokiglitter.com/tutorials/horizontal.html http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/

所有脚本似乎都是为了在静态宽度 div/元素中显示内容而制作的。

我正在尝试制作一个相当简单的导航菜单。当单击顶级 UL 中的元素时，如果再次单击“关闭”，则底部级别 UL 会“滑”出。我想我必须“动态”计算宽度......不知道如何继续。

一个例子是这样的:

    <style type="text/css">
<!--
ul.menu, ul.menu ul{ 
    list-style: none;
    display: inline;
    }
ul.menu li, ul.menu ul li {
    display: inline;
}

a, a:link, a:hover, a:visited, a:active {
    color: black;
    text-decoration: none;
}
-->
</style>


<ul class="menu">
    <li>
        <a href="#">Top-level 1</a>
    </li>
    <li>
        <a href="#">Top-level 2</a>
        <ul>
            <li><a href="#">Bottom Level A1</a></li>
            <li><a href="#">Bottom Level A2</a></li>
            <li><a href="#">Bottom Level A3</a></li>
            <li><a href="#">Bottom Level A4</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top-level 3</a>
        <ul>
            <li><a href="#">Bottom Level B1</a></li>
            <li><a href="#">Bottom Level B2</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Top-level 4</a>
    </li>
</ul>

Answer 1

我会这样做:

var $current = null;

$(document).ready(function(){
   $("ul li ul").hide(); // hide submenus by default on load

   $("ul li a").click(function(){
      var $sub = $(this).find("ul"); // could also use $(this).next();

      if ($sub.css("display") == "none")
      {
         if ($current != null)
            $current.slideUp(); // if you want to only show one sub at a time
         $sub.slideDown();
         $current = $sub;
      }
      else
      {
         $sub.slideUp();
         $current = null;
      }
   });
});