切换ul(子菜单)

时间:2010-12-06 19:54:25

标签: javascript jquery hover

当我将鼠标悬停在<ul>上时,如何在<li>内显示第一个<li>

3 个答案:

答案 0 :(得分:3)

$("ul.menu>li").hover(
  function() {
    $(this).children("ul:first").show();
  },
  function() {
    $(this).children("ul:first").hide();
  }
);

答案 1 :(得分:3)

<强> HTML:

<ul>
    <li class="firstLevel">
        <ul></ul>
    </li>
    <li class="firstLevel"></li>
    <li class="firstLevel"></li>
</ul>

<强> JS:

$('li.firstLevel').hover(function(){
    $(this).find('ul:first').show();
},
function(){
    $(this).find('ul:first').hide();
});

注意:只有在lis(IE6)上不支持hover的浏览器才需要这样做

答案 2 :(得分:0)

只是提倡CSS。如果您不支持IE6并且不需要特殊效果,我建议您使用CSS:

ul.menu li > ul {
  display: none;
}

ul.menu li:hover > ul {
  display: block;
}