我有一个带有嵌套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 {
list-style-type: none;
}
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/
问题是,无论在调用集合的第一个元素之前做什么,height()总是取该元素的高度。
将each()
与Math.max
一起使用将起的作用
http://jsfiddle.net/kZ236/3/
您使用next()的代码不起作用,因为ul没有下一个元素。next()
不是通过$('ul ul ul')
集合的迭代器,而是在dom树中获得下一个sibbling。
试试这个:
$(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