2014-09-08 2 views
0

모바일 모바일 메뉴 시스템을 만들려고합니다.하위 메뉴가있는 메뉴 항목을 선택한 다음 기본 메뉴 항목을 숨기기

'메뉴 항목 4'를 클릭하면 주 메뉴 항목에 '표시 없음'이 적용되어 원하는 항목이 적용되지만 '메뉴 항목 4'를 다시 클릭하여 다시 사용할 수 있습니다. 이는 내가 해결할 수없는 것 : 여기

예 : http://jsfiddle.net/zidski/g3jkgyhy/

$("#menu-icon").on("click", function(){ 
    $("#sb-navigation").slideToggle(); 
    $(this).toggleClass("active"); 

    setTimeout(function(){ 
     $('#level1').hide(); 
    }, 500); 
    $('.item').css('display', 'block'); 
    }); 

$("#submenu").on("click", function(){ 
    $("#level1").slideToggle(); 
    $(this).toggleClass("active"); 

    var v = $(this).toggleClass("active"); 
    var j = $('#sb-navigation nav ul li.item'); 

    if ($('#level1').is(':visible')){ 
     $(j).css('display', 'none'); 
     //alert('test'); 
    }else { 
     $(j).css('display', 'block'); 
    } 
    }); 

답변

0

당신은 변경해야 http://jsfiddle.net/g3jkgyhy/1/

참조

볼 :

$("#level1").slideToggle(function() { 

에 slideToggle 당신을 위해 확인해야 할 때입니다이 완료 콜백을 취할. slideToggle()을 호출하고 코드를 계속 실행하면 slideToggle이 실행되기 전에 is : visible 확인에 도달하므로 # level1의 visiblity가 항상 true가됩니다.

관련 문제