Горизонтальный Аккордеон для многоуровневой UL

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 / element статической ширины.

Я пытаюсь сделать довольно простое навигационное меню. При щелчке элемента в 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

Я использовал $(this).outerWidth(), чтобы вычислить, как далеко должен переместиться $sub, но в этом примере он не работает. Не слишком полезно, но это может указать вам правильное направление. (также, мы надеемся, вы уже решили эту проблему)

Answer 2

Я бы сделал это так:

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 3

Для экземпляра:

   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?

Answer 4

"вместо slideUp / slideDown вы хотите использовать animate ()"

Полагаю, это то, где я зависал ... Я не уверен, как рассчитать ширину UL нижнего уровня на лету (если это даже необходимо)