Question

我一直在关注google上过多的水平手风琴脚本。

例如： 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;
      }
   });
});

Answer 2

我使用$(this).outerWidth()来计算$sub应该移动多远，但它似乎不适用于此示例。没有太大帮助，但它可能会指向正确的方向。（另外，你现在希望能解决这个问题）

Answer 3

“而不是slideUp / slideDown，你想要使用animate（）”

我想这就是我被挂起的地方......我不确定如何动态计算底层UL的宽度（如果这是必要的话）

Answer 4

For Instance：

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

   $("ul li a").click(function(){
      var $sub = $(this).next(); 
      if ($sub.css("display") == "none")
      {
         if ($current != null)
            $current.animate({ width: 'hide' }); // if you want to only show one sub at a time
         $sub.animate({ width: 'show' }); 
         $current = $sub;
      }
      else
      {
         $sub.animate({ width: 'hide' });
         $current = null;
      }
   });
});

我认为这会起作用，但它似乎只是滑动的一种变体，它并不真正起到“slideRight”“slideLeft”功能的作用。也许是css？

多级UL的水平手风琴

4 个答案: