0

所有其他浏览器（包括 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;
}
4

1 回答 1

0

首先，如果您使用的是嵌套列表，则必须将第二个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。

于 2012-06-01T21:53:12.433 回答