Многоуровневый неупорядоченный список в интерактивных горизонтальных меню

Question

У меня есть вложенный неупорядоченный список. Мне нужно отобразить это как горизонтальные меню друг под другом. Самая большая проблема в том, что я не знаю, сколько уровней я получу в этом списке, поэтому я хочу создать функциональность, которая будет работать с глубиной списка n-уровня.

Пример списка:

<ul id="data">
    <li>
        <h1>Menu 1</h1>
        <ul>
            <li>
                <h1>Menu 1-1</h1>
                <ul>
                    <li>
                        <div>Some content A</div>
                    </li>
                </ul>
            </li>
            <li>
                <h1>Menu 1-2</h1>
                <ul>
                    <li>
                        <div>Some content B</div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <h1>Menu 2</h1>
        <ul>
            <li>
                <h1>Menu 2-1</h1>
                <ul>
                    <li>
                        <div>Some content C</div>
                    </li>
                </ul>
            </li>
            <li>
                <h1>Menu 2-2</h1>
                <ul>
                    <li>
                        <div>Some content E</div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul> 

Идея, как это будет работать:

Menu 1    Menu 2  
Menu 1-1    Menu 1-2

Другие списки скрыты по умолчанию. Когда я нажимаю на Меню 2, результат должен быть:

Menu 1    Menu 2
Menu 2-1    Menu 2-2

Когда я нажимаю на определенный <h1>, и элемент <ul> на том же уровне, что и этот элемент, не имеет дочерних элементов <h1>, элемент <div> отображается под меню. В нашем случае: когда я нажимаю на Меню 1-1, отображается содержимое «Некоторое содержимое А».

Я пробовал с рекурсией и просто с использованием CSS, но я не могу заставить его работать. Спасибо заранее.

Answer 1

Я знаю, что уже поздно, но посмотрите на это: http://jsfiddle.net/sxDbu/1/

HTML

<div id="outer-wrapper">
  <ul id="data">
    <li><h1>Menu 1</h1>
      <ul>
        <li><h1>Menu 1-1</h1>
          <ul>
            <li><div>Some content A</div></li>
          </ul>
        </li>
        <li><h1>Menu 1-2</h1>
          <ul>
            <li><h1>Menu 1-2-1</h1>
              <ul>
                <li><h1>Menu 1-2-1-1</h1>
                  <ul>
                    <li><div>Some content A</div></li>
                  </ul>
                </li>
                <li><h1>Menu 1-2-1-2</h1>
                  <ul>
                    <li><div>Some content B</div></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><h1>Menu 2</h1>
      <ul>
        <li><h1>Menu 2-1</h1>
          <ul>
            <li><div>Some content C</div></li>
          </ul>
        </li>
        <li><h1>Menu 2-2</h1>
          <ul>
            <li><div>Some content D</div></li>
          </ul>
        </li>
        <li><h1>Menu 2-3</h1>
          <ul>
            <li><div>Some content D</div></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

CSS

#outer-wrapper {
  position: relative;
}

ul {
  position: absolute;
  list-style: none;
  padding: 0;
  margin: 0;
  left: 0;
  right: 0;
}

ul ul {
  display: none;
}

li {
  float: left;
  cursor: pointer;
}

li.active > h1 {
  background: #171717;
  color: #fff;
}

li.active > ul {
  display: block;
}

JS

$(function () {
  "use strict";

  $('#outer-wrapper').on('click', 'li', function () {
    $(this).closest('ul').find('li').removeClass('active');
    $(this).addClass('active');
    return false;
  });
});

Answer 2

Я думаю, вам нужен код jQuery:

$(function(){
    $('h1').click(function(){
        var parentUl = $(this).closest('ul');
        if (parentUl.hasClass('active')) {
            var sibsWithActive = parentUl.find('ul.active');
            if (sibsWithActive) {
                sibsWithActive.removeClass('active');
                $(this).siblings('ul').addClass('active');
            } else {
                $(this).siblings('ul').addClass('active');
            }
        } else {
            $('ul.active').removeClass('active');
            $(this).siblings('ul').addClass('active');
        }
    });
});

Я создал документ jsfiddle, который демонстрирует это здесь: http://jsfiddle.net/nLgVt/

Очевидно, что CSS является зачаточным.