Question

我正在为导航栏创建一个新功能。它曾经在你点击它时下拉，但新的方式是它们悬停在箭头上（指向下方）。

我遇到的问题是我为此编写的脚本在较新版本的jQuery中运行良好，但在此站点的版本中无法正常工作。

请参阅jQuery的最新版本示例：http://jsfiddle.net/titanium/wDEjs/

请参阅版本1.4.1 ：http://jsfiddle.net/titanium/SmhHM/

的示例

脚本本身（对于新版本）没有任何问题，但它需要更改，以便在版本1.4.1 中工作，以解决此版本中的错误/错误。即使有人知道错误/错误是什么，并且可以指出我正确的方向来绕过这个，那就太好了。

我知道最好的办法是使用更新版本的jQuery，但我已经尝试了这个，它似乎在网站周围捣乱了一些东西（这是一个非常大的网站）。

这是我目前正在使用的代码（在最新版本的jQuery中可以正常工作）：

HTML

<ul>
    <li>Page <span>sub</span></li>
    <li>Page <span>sub</span></li>
    <li>Page <span>sub</span></li>
    <div class="clear"></div>
</ul>

<div class="sub">
    <p>Some stuff here for the menu</p>
</div>

CSS

ul {
    margin:0;
    padding:0;
}
li {
    float:left;
    padding:0 50px;
    background-color:#eee;
}
span {
    cursor:pointer;
}
.clear {
    clear:both;
}
.sub {
    width:400px;
    height:300px;
    display:none;
    background-color:#ccc;
}

的Javascript

$(document).ready(function() {
    $("span, .sub").hover(function() {
        $(".sub").stop(true, false).slideToggle();
    });
});

Answer 1

不要t know really why its working like that, but it does work with jquery 1.4.1 and if you change the second parameter of the stop, to true, it工作，有点笨拙，但是ll work, cause it会跳到动画的最后，如果你把它留下来会发生什么，如果你没有t let the animation finish, it然后滑到它结束的前一点。

Answer 2

在这种情况下可以解决一个问题（不是很好但是有效，特别是在处理旧版本的jQuery库时）：

<script src="/js/jquery-1.4.1.min.js"></script>
<script src="/js/jquery-1.9.1.min.js"></script>
<script>
  var jQuery_1_9_1 = $.noConflict(true);
</script>

调用jQuery函数时，不要使用全局变量$，而是使用您创建的变量。在这种情况下，这将是jQuery_1_9_1。

最终结果将是脚本中的此更改：

$(document).ready(function() {
    $("span, .sub").hover(function() {
        jQuery_1_9_1(".sub").stop(true, false).slideToggle();
    });
});

SlideToggle（）在悬停事件（jQuery 1.4.1）上无法正常工作

2 个答案: