Question

所有其他浏览器（包括IE8 +）似乎都没有问题处理此代码;只是IE7失败了。单击li时它不执行任何操作（也没有控制台错误）。使用最新的jquery 1.7.2库。

这是javascript函数：

function expandableMenu(){
    $('#nav li').click(function(){
        var $child = $(this).next();
        if($child.is('.subNav')){
            if($child.is(':hidden')){
                $('#nav > ul').slideUp(300);
            }
            $child.slideToggle(300);
        }
    });
}

这是html：

  <ul id="nav">
    <li id="accommodations"></li>
    <ul class="subNav">
      <li><a href="#">Kitchen</a></li>
      <li><a href="#">Family Room</a></li>
      <li><a href="#">Sauna</a></li>
    </ul>
    <li id="attractions"></li>
    <ul class="subNav">
      <li><a href="#">Bryce Canyon National Park</a></li>
      <li><a href="#">Zion National Park</a></li>
      <li><a href="#">Cedar Breaks Natl Monument</a></li>
    </ul>
    <li id="reserve"></li>
  </ul>

最后，CSS：

#nav {
    top: -40px;
    left: 6px;
    position: relative;
    list-style-type: none;
    z-index: -1;
}

#nav li {
    height: 39px;
    vertical-align: bottom;
    position: relative;
}

#nav ul.subNav {
    display: none;
    list-style-type: none;
    width: 273px;
}

Answer 1

首先，如果您使用的是嵌套列表，则必须在ul元素中添加第二个li：

<ul id="nav">
    <li id="accommodations">First list
        <ul class="subNav">
          <li><a href="#">Kitchen</a></li>
          <li><a href="#">Family Room</a></li>
          <li><a href="#">Sauna</a></li>
        </ul>
    </li>
    <li id="attractions">Second list
        <ul class="subNav">
          <li><a href="#">Bryce Canyon National Park</a></li>
          <li><a href="#">Zion National Park</a></li>
          <li><a href="#">Cedar Breaks Natl Monument</a></li>
        </ul>
    </li>
    <li id="reserve"></li>
</ul>

然后使用var $child = $(this).find('.subNav');在click事件中获取嵌套列表。尝试更改z-index，当我在jsfiddle上检查你的代码时点击什么也没做 - 当我将-1更改为99时，它开始工作了。也许IE7无法识别负z-index值。

jquery滑动菜单不能与IE7一起使用

1 个答案: