繁体   English   中英

SlideToggle()在悬停事件上无法正常工作(jQuery 1.4.1)

[英]SlideToggle() not working correctly on hover event (jQuery 1.4.1)

我正在为导航栏创建一个新功能。 当您单击它时它会下拉,但是新的方法是当鼠标悬停在箭头上(指向下方)时。

我遇到的问题是我为此编写的脚本在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;
}

Java脚本

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

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, itt 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起作用,有点buggier,但是它将ll work, cause it跳转到动画结束时,如果将其保留为false,将会发生以下情况:如果t let the animation finish, it滑动到结束的前一点。

在这种情况下,有一个解决方法(不是很好,但可以,尤其是在处理旧版本的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();
    });
});

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM