Question

我已经建立了一个巨型菜单，当你点击它打开的导航链接时，当你再次点击它关闭（它正常工作）。内部还有一个紧密的链接应该在单击时切换它关闭，但在IE中，它只是在每次单击时重新打开它。它可以在Firefox，Chrome和Safari中正常运行。

由于某些计算机使用触摸屏，因此必须通过点击打开和关闭菜单。有什么想法吗？

以下是精简代码（仅显示一个导航链接）：

JQuery的：

$(document).ready(function(){
 $('div.megamenu> div').hide();  

 /* This toggles the nav link open and closed --works correctly */
 $(".Benefits-Down").click(function() {
      $(".Benefits-Dropped").slideToggle("Fast");
  });

/*This is suppose to also toggle it closed, but it doesn't work in IE*/
  $(".Benefits-Close").click(function() {
            $(".Benefits-Dropped").slideToggle("Fast");
  });

});

HTML：

<div class="megamenu">
    <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */</li>
 <div class="Benefits-Dropped">
         Links                          
        <div class="Benefits-Close">
                   <a href="#">Close</a>        
               </div>
         </div>
      </ul>
</div>

Answer 1

这是因为你有无效的标记，<div>不是<ul>的有效子，IE并不真正容忍它，要么将它放在<li>这样的内容中：

<div class="megamenu">
  <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */
      <div class="Benefits-Dropped">
        Links                          
        <div class="Benefits-Close">
          <a href="#">Close</a>        
        </div>
      </div>
    </li>
  </ul>
</div>

或在<ul>之外，如下：

<div class="megamenu">
  <ul>
    <li class="Benefits-Down">Link goes here /*removed so question would post */</li>
  </ul>
  <div class="Benefits-Dropped">
    Links                          
    <div class="Benefits-Close">
      <a href="#">Close</a>        
    </div>
  </div>
</div>

.slideToggle里面的div不能在IE7超级菜单中工作

1 个答案: