Question

显示/隐藏IE7不起作用。在其他浏览器中工作正常。请帮帮我。我做错了吗？

<div id="secondary_nav" class="box">                    
    <ul>    
        <li><a href="">test</a></li>
        <ul class="sub-menu" style="height: 336px; display: none;">
            <li><a href="">test</a></li>            
        </ul>
    </ul>                
</div>

 <script type="text/javascript">
$(document).ready(function() {
    $("#secondary_nav ul li").hover(function() {
            $(this).next(".sub-menu").show();
            $(this).next(".sub-menu").hover(function() {
                    $(this).show();
                }, function() {$(this).hide();}
            );
        },function() {$(this).next(".sub-menu").hide();}
    );
});
 </script>

Answer 1

首先需要修复标记。子菜单与表示它的链接相同li：

<div id="secondary_nav" class="box">                    
  <ul>    
    <li>
      <a href="">test</a>
      <ul class="sub-menu" style="height: 336px; display: none;">
        <li><a href="">test</a></li>            
      </ul>
    </li>
  </ul>                
</div>

接下来，您在$.hover()处遇到了一些问题，即您在第一个状态的过度状态下执行了额外的嵌套悬停。我们也要清理它：

$(function(){
  $("#secondary_nav > ul > li").hover(
    function(){ $(".sub-menu", this).show(); },
    function(){ $(".sub-menu", this).hide(); }
  );
});

小提琴：http://jsfiddle.net/4KFac/

Answer 2

HTML代码已损坏。您无法在另一个ul代码中直接使用ul代码。

Answer 3

它对我来说很好http://jsfiddle.net/Ln8ep/1/
尝试使用$(document).ready(function() {

JQuery显示/隐藏不工作的IE7

3 个答案: