2

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

这是 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;}

如果有人可以提供任何关于问题可能出在哪里以及如何解决问题的指示，我将非常感激。一直在扯我的头发！谢谢你。

4

1 回答 1

1

$.browser您的 fancybox 插件使用了已从最新 jQuery 版本 ( 1.9 ) 中删除的 deprecated 插件，这意味着您现在在该脚本中遇到了一个错误，它破坏了它的功能。

有2个解决方案：

  • 降级回 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 插件来恢复旧的弃用行为。请参阅此处的信息 - 有一个开发版本在使用弃用功能时输出控制台警告，还有另一个更适合生产的缩小版本。

附带说明一下，您不应该http://code.jquery.com/jquery-latest.min.js在生产环境中使用，因为您无法预见未来可能发生的变化。始终使用经过测试的稳定 jQuery 版本来维护您的网站。

于 2013-01-20T23:40:28.287 回答