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

まず、ネストされたリストを使用している場合は、2番目の要素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と、作業が開始されました。z-indexたぶんIE7は負の値を認識しません。

于 2012-06-01T21:53:12.433 に答える