다중 드롭 다운 메뉴, 하나의 jQuery 스크립트

Question

Skyrocket Labs가 개발 한 JDIV 드롭 다운 메뉴로 연주 해 왔으며 Peter Hinton이 향상 시켰습니다.다른 식별자 (# NAV1 트리거 # HIDDEN-MENU1, # NAV2 트리거 # HIDDEN-NAV2 등)를 사용하여 코드를 복제하는 한 동일한 페이지의 여러 메뉴에서 잘 작동합니다.

        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();
    });

.

코드를 다시 작성하는 방법을 분류하려고 시도하고 있으므로 "Deak"@ vavx 링크의 숫자 값이 호버와 적절한 숨겨진 navx div를 트리거합니다.

Answer 1

여기에 일하고 있습니다 jsfiddle 데모

ID는 클래스 을 사용하는 것만으로 코드와 스트라이프가 얼마나 쉽고 스트라이핑 될 수 있는지 보여주기 위해 모든 ID를 제거했습니다.


이들을 사용해야하는 경우 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'와 그의 공동 응답자 '드롭 다운'에 자동으로 동일한 사용자 정의 클래스를 추가합니다. '.connectedn',
'n'은 증가 된 숫자입니다.
우리가 말하는 것보다 : 호버링 된 'Li'가 클래스 'Connected3'인 경우 우리는 3 번째 'Li'를 유혹했는데, 우리는 같은 수업을 가진 '.dropdown'을 열어 보겠습니다.

Answer 2

시도

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);
}

.