複数のドロップダウンメニュー、1つのjQueryスクリプト
-
09-09-2020 - |
質問
Skyrocket Labsによって開発され、Peter Hintonによって改善されたJDIVドロップダウンメニューで遊んでいます。同じページ上の複数のメニューにうまく機能します。
var hide1 = false;
$("#nav1").hover(function(){
if (hide1) clearTimeout(hide1);
$("#hidden-nav1").show();
}, function() {
hide1 = setTimeout(function() {$("#hidden-nav1").hide();});
});
$("#hidden-nav1").hover(function(){
if (hide1) clearTimeout(hide1);
}, function() {
hide1 = setTimeout(function() {$("#hidden-nav1").hide();});
$("#hidden-nav1").stop().show();
});
.
コードの書き換え方法を整理しようとしています。
解決
これは働いています
jsfiddleデモ
私はすべてのIDを削除しました。 classes を使用するだけで、コードと機能を簡単かつ機能させることができます。
あなたがそれらを使う必要があるならば、あなたのIDを元に戻すことができますが、すべての変更を残してください。
コードについて説明が必要な場合は、各行をコメントできます。
これは新しい/変更されたjQuery:
$(document).ready(function() {
var countNavs = 0; $('#navlist li').attr('class', function() {countNavs++;return 'connected' + countNavs;});
var countDrops = 0; $('.dropdown').attr('class', function() {countDrops++;return 'dropdown connected' + countDrops;});
var hide1 = false;
$("#navlist li").hover(function(){
var equal = $(this).attr('class');
$('.active').removeClass();
if (hide1) clearTimeout(hide1);
$('.dropdown').hide();
$('.'+equal).not('li').show();
$(this).children('a').toggleClass('active');
}, function() {
hide1 = setTimeout(function() {$('.'+equal).not('li').hide();});
});
$('.dropdown').hover(function(){
if (hide1) clearTimeout(hide1);
}, function() {
hide1 = setTimeout(function() {$('.dropdown').hide();});
$('.active').removeClass();
$('.dropdown').stop().show();
});
});
.
あなたがほとんどない単語で理解するのを助ける:それぞれの 'li'と彼の承認者のdropdown 'を自動的に追加しました:' .connectedn '、ここで' n 'はインクリメントされた数です。
heroved 'li'がクラス 'Connected3'の場合よりも、私たちは3th 'Li'をホバリングしただけで、同じクラスを持つ '.dropdown'を開くことを意味します。
他のヒント
を試してください
function doNav(id) {
var hide = false;
$(id).hover(function() {
if (hide) clearTimeout(hide);
$("#hidden" + id).show();
}, function() {
hide = setTimeout(function() {
$("#hidden" + id).hide();
});
});
$("#hidden" + id).hover(function() {
if (hide) clearTimeout(hide);
}, function() {
hide = setTimeout(function() {
$("#hidden" + id).hide();
});
$("#hidden" + id).stop().show();
});
}
for (var i = 1; i < 4; i++) {
doNav("nav" + i);
}
. 所属していません StackOverflow