Горизонтальный аккордеон для многоуровневых 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/элемента.

Я пытаюсь сделать довольно прямое навигационное меню. Когда элемент верхнего уровня 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

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

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

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

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