簡體   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