jQuery 토글을 열어 두지 않고

Question

div를 확장하거나 축소하려고하면 기본적으로 subnav가있는 메뉴입니다. 그래서 처음에는 subnav를 감추기 위해 높이를 48px로 설정했고, JS가 없다면 여전히 괜찮아 보입니다. div를 열거 나 닫으려고 토글을 지정합니다.이 경우 높이를 설정하십시오.

계속 새로 고침하고 자동으로 div를 여는. 열어두기를 원하지 않고, 단지 펼치고, 경고를주고, 다시 닫는다.

jQuery(document).ready(function($) { 
$('#nav-wrapper').css('height','48px'); 
    $('#menu-item-18').click(function() { 
    var open = false; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     var isOpen = false; 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     isOpen = !isOpen; 
     alert ('open') 
    }; 
    }); 
}); 

이 방법을 과장 할 수 있습니다. 나는 더 간단한 해결책이 너무있을 것이라고 확신한다.

Answer 1

isOpen은 로컬 범위에 정의되어 있으므로 값은 항상 false입니다. 클릭 핸들러 외부로 이동해야하며 값을 전환하려면 isOpen = !isOpen;이 필요합니다.

$('#nav-wrapper').css('height','48px'); 
    var isOpen = false; 

    $('#menu-item-18').click(function() { 
    isOpen = !isOpen; 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
     alert ('not open') 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
     alert ('open') 
    }; 
    }); 

Answer 2

이이 내가 생각할 수있는 쉬운 방법입니다 어떤 변수의 사용없이 (뿐만 아니라 여러 요소를 및 처리)

$('#menu-item-18').click(function() { 
    var isOpen = $(this).is('.open'); 
    if(isOpen) { 
     $('#nav-wrapper').animate({ height: '-=44' }, 0); 
     $(this).removeClass('open'); 
     alert ('not open'); 
    } else { 
     $('#nav-wrapper').animate({ height: '+=44' }, 0); 
     $(this).addClass('open'); 
     alert ('open') ; 
    }; 
}); 

Answer 3

작동합니다, 아래 참조;

$('#menu-item-18').click(function() { 
if($(this).hasClass("active")) { 
    $('#nav-wrapper').animate({ height: '-=44' }, 0, function() {}); 
    $(this).removeClass("active"); 
} else { 
    $('#nav-wrapper').animate({ height: '+=44' }, 0, function() {}); 
    $(this).addClass("active"); 
} 
}); 

Answer 4

니스와

$('#menu-item-18').click(function() { 
    $('#nav-wrapper').slideToggle(200, //speed in ms 
     function() { 
     //callback (runs after shown or hidden) 
     $(this).is(':visible'); //Returns true if not hidden false if hidden 
     } 
    );  
});