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

我有一个嵌套的无序列表。我需要将它作为水平菜单显示在彼此之下。最大的问题是我不知道我将在这个列表中获得多少级别，所以我想创建可用于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>显示在菜单的下方。在我们的例子中：当我点击内容为'Some content A'的Menu 1-1 div时。

我已经试过递归和只使用CSS，但我不能让它工作。 Thnx提前。

来源

2011-12-22 Mitja Felicijan

我认为你需要的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是版本简陋。

来源

2011-12-22 10:11:29 Jaijaz

这太棒了。正是我需要的。是否可以将菜单2的子菜单与左边对齐？ – 2011-12-22 10:23:08

是的，我确定。我不能说，现在我的头在附近，但我会对子元素进行一些定位。可能它可能需要是绝对的，但是你需要设置宽度等。 – Jaijaz 2011-12-22 11:29:34

我将此添加到css left：0;以ul ul.active和它的工作。 Thnx寻求建议。 – 2011-12-22 14:45:02

我知道这是一个有点晚了，但看看这个：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; 
}

$(function() { 
    "use strict"; 

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

来源

2011-12-23 09:17:32 Yoshi

工程就像一个魅力。 – 2011-12-23 17:51:45

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

回答

相关问题