의 jQuery 이벤트는 항상 내가 여기에 기본 개념을 누락 생각 ... 난으로 jQuery를 사용하여 작업을 다운 메뉴 내 드롭을 가지고

Question

$(document).ready(function(){ 
    $('#nav').mouseup(function(){ 
     $(this).css('height','33em') 
     .mouseup(function(){ 
       $(this).css('height','5.7em');  
     });  
    }); 
}); 

http://jsfiddle.net/bryank/afcnR/

작동하도록해야합니다 ... 한 번만 불을 트리거 하지만 그것은 한 번만 작동하고 작동을 멈 춥니 다. 함수의 시작 부분으로 돌아가려면 mouseup 이벤트가 필요합니까?

Answer 1

경쟁 이벤트 핸들러가 있고 마지막 이벤트 핸들러 (높이를 5.7em로 설정 한 이벤트)가 승리합니다. 이벤트 처리기는 실제로 스택이므로 메뉴를 닫는 복사본을 계속 추가합니다.

개폐 상태를 독립적으로 유지하십시오. 이런 식으로 뭔가 (jsfiddle) : (jsfiddle를)

#nav { height: 5.7em; } 
.open { height: 33em !important; } 

을 ... 그리고 방금에 그 클래스를 전환하고 :

$(document).ready(function() { 
    $('#nav').data('open', 0).mouseup(function() { 
     if ($(this).data('open') == 0) { 
      $(this).css('height', '33em').data('open', 1); 
     } else { 
      $(this).css('height', '5.7em').data('open', 0); 
     } 
    }); 
}); 

또는 더 나은 아직, CSS 클래스에 CSS 정보를 이동

을

$(document).ready(function() { 
    $('#nav').mouseup(function() { 
     $(this).toggleClass('open'); 
    }); 
}); 

Answer 2

클래스를 사용하여 현재 상태를 플래그 지정합니다. 이것은 여러 가지 방법으로 사용되는 매우 유용한 기술입니다. 이 경우 "selected"라는 클래스를 사용했지만 원하는대로 사용할 수 있습니다.
이 http://jsfiddle.net/acturbo/afcnR/1/

JQuery와 :

$(document).ready(function(){ 

     $('#nav').on("mouseup", function(){ 

      $(this).toggleClass("selected"); 

      if ($(this).hasClass("selected")){ 
       $(this).css('height','33em'); 
      }else{ 
        $(this).css('height','5.7em');  
      } 


     }); 
    });