多級無序列表到交互式水平菜單

我有一個嵌套的無序列表。我需要將它作爲水平菜單顯示在彼此之下。最大的問題是我不知道我將在這個列表中獲得多少級別，所以我想創建可用於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

多級無序列表到交互式水平菜單

回答

相關問題