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 div时，会显示内容'Some content A'。

我已尝试使用递归并仅使用CSS但我无法使其工作。 Thnx提前。

Answer 1

我认为您需要的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是初步的。

Answer 2

我知道它有点晚了，但请看一下：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;
  });
});

多级无序列表到交互式水平菜单中

2 个答案: