jquery滑动菜单不适用于IE7

所有其他浏览器（包括IE8+）似乎都能毫无问题地处理这段代码；只是IE7失败了。单击li时，它不执行任何操作（也没有控制台错误）。使用最新的jQuery1.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>

---

首先，如果使用嵌套列表，则必须将第二个

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'）

要在

中获取嵌套列表，请单击
事件。尝试更改
z-index
，当我在JSFIDLE上检查您的代码时，单击也没有做任何事情-当我将
-1
更改为
99
时，它开始工作。也许IE7不能识别负的
z指数值。
谢谢Wirone。关于重新编写javascript有什么建议吗？因为我现在嵌套了它们，所以选择器变得不同，这导致了我的问题。基础ul打开，但剩余菜单不滑动；下面的subNav就在菜单下面打开。请用你现在使用的html结构更新你的html结构，这样我就可以使用javascript了。现在您的选择器是
#nav>ul
，它直接在
#nav
中搜索ul（它不在那里），我认为您应该使用
$（'nav ul.subNav'）。而不是（$child）
隐藏以前打开的子菜单，然后切换
$child
的可见性。在调整了一些CSS后，我终于让它工作了。今晚晚些时候我会发布我的最终解决方案。谢谢你的帮助。
<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>