Вложенная высота UL

Question

У меня есть меню с вложенными UL для работы в качестве выпадающего меню. В раскрывающемся списке у меня есть еще один вложенный UL с LI, которые прагматически сгенерированы, поэтому я не знаю, сколько из них будет в их.

Я пытался установить высоту второго UL при загрузке, чтобы я мог поместить рамку вокруг выпадающего списка.

HTML:

<ul> 
    <li>1</li> 
    <li>2 
     <ul> 
      <li>2a 
       <ul class="submenu"> 
        <li>2a1</li> 
        <li>2a2</li> 
        <li>2a3</li> 
        <li>2a4</li> 
        <li>2a5</li> 
       </ul> 
      </li> 
      <li>2b 
       <ul class="submenu"> 
        <li>2b1</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
        <li>2b2</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li>3</li> 
</ul> 

CSS: уль { список стиле типа: нет; }

 ul li { 
      display: inline-block; 
      /*float: left;*/ 
      width: 100px; 
     } 

      ul li:hover { 
       background-color: #cc0505; 
       color: white; 
      } 

      ul li ul { 
       /*visibility: hidden;*/ 
       position: absolute; 
       padding: 0px; 
       border: 2px solid black; 
       /*min-height:120px;*/ 
      } 

      ul li:hover ul { 
       visibility: visible; 
      } 

      ul li ul li { 
       /*display: inline; 
       float: left;*/ 
       color: black; 
      } 

       ul li ul li:hover { 
        background-color: white; 
        color: black; 
       } 

       ul li ul li ul { 
        border: none; 
        min-height:0px; 
       } 

        ul li ul li ul li { 
         display: block; 
         /*float: none;*/ 
        } 

         ul li ul li ul li:hover { 
          background-color: #cc0505; 
          color: white; 
         } 

Я попытался с помощью $('ul ul ul').each и $('ul ul ul').next() к петле через любой UL на третьем уровне, но это только кажется быть собирание первого вхождения.

jsfiddle Я создал свой код и несколько попыток, которые я сделал, чтобы получить это право. http://jsfiddle.net/kZ236/2/

Answer 1

проблема заключается в том, что height() всегда принимает высоту первого элемента набора, независимо от того, что вы делаете до его вызова.

использованием each() вместе с Math.max будет работать

http://jsfiddle.net/kZ236/3/

код с рядом() не работает, как улица не имела следующий элемент. next() не является итератором через набор $('ul ul ul'), но получает следующий сиблинг в дереве домика.

Answer 2

Попробуйте это:

$(document).ready(function() { 
    $('#nav>li>ul').each(function(){ 
     var maxHt=0; 
     $(this).find('.submenu').each(function(){ 
      var bottomPosition=$(this).height() +$(this).position().top 
      maxHt= bottomPosition>maxHt ? bottomPosition : maxHt; 
     }); 

     $(this).height(maxHt) 
    }) 
}) 

DEMO