Question

经过4个月的工作没有问题，jQuery垂直下拉菜单突然消失了。我认为它与我链接的jQuery版本的更新有关，这对于页面http://code.jquery.com/jquery-latest.min.js上的其他功能是必要的。该页面可以是viewed here.

这是HTML的一个例子

<li><a href="#">Morocco</a>
<ul>
  <li><a href="?panel=0#morocco1">10 day Trek &amp; Camels </a></li>
  <li><a href="?panel=1#morocco2"> 14 day Trek &amp; Camels </a></li>
  <li><a href="?panel=2#morocco3">14 day Trek &amp; Service</a></li>
</ul>

这是jQuery / Javascript

<script type="text/javascript">
$(function () {
    $('#nav > li > ul')
        .hide()
        .click(function (e) {
        e.stopPropagation();
    });

    $('#nav > li').toggle(function () {
        $(this)
            .removeClass('waiting')
            .find('ul').slideDown();
    }, function () {
        $(this)
            .removeClass('waiting')
            .find('ul').slideUp();
    });

    $('#nav > li').hover(function () {
        $(this).addClass('waiting');
        setTimeout(function () {
            $('#nav .waiting')
                .click()
                .removeClass('waiting');
        }, 800);
    }, function () {
        $('#nav .waiting').removeClass('waiting');
    });
});
</script>

<script type="text/javascript">
$(document).ready(function () {
    $('#nav > li > a').eq(1).next().show();
});
</script>

这是CSS：

}
#usexpeditionleftmenu {
width: 165px;
float: left;
background-color: #FFF;
margin-top: 15px;
padding-left: 12px;

    }
#nav {
float: left;
width: 155px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;

}
#nav li a {
display: block;
background: #d7d7d7;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #afafaf;
text-decoration: none;
color: #EB5B00;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
}
ul#nav li ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #EB5B00;
}
#nav li a:hover, #nav li a.active {
color: #fff;
background-color: #8F8F8F;  
}
#nav li ul {
display: none; // used to hide sub-menus
}
#nav li ul li a {
background: #c1c1c1;
border-bottom: 1px dotted #ccc;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;

}

#nav, #nav ul, #nav li {list-style:none;}

如果有人可以提供任何关于问题所在位置以及如何解决问题的指示，我真的很感激。一直在撕扯我的头发！谢谢。

Answer 1

您的fancybox插件使用已从最新的jQuery版本（$.browser）中删除的已弃用的1.9，这意味着现在您在该脚本中出现错误，导致其功能中断。

有两种解决方案：

降级回jQuery 1.8.3，CDN可用（使用其中任何一种）：

http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js
http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js
http://code.jquery.com/jquery-1.8.3.js

使用jQuery Migrate插件恢复旧的弃用行为。请参阅info here - 这是一个开发版本，在使用不推荐使用的功能时会输出控制台警告，而另一个缩小版本则更适合生产。

另一方面，您不应在生产环境中使用http://code.jquery.com/jquery-latest.min.js，因为您无法预见将来会发生什么变化。始终保持您的网站使用您经过测试的稳定的jQuery版本。

jQuery下拉导航突然消失了

1 个答案: