Jquery 클래스가 작동하지만 다른 함수에 영향을주지 않습니다.

Question

그래서 화살표를 클릭하면 내용 상자가 닫히고 확장됩니다. 내용 상자에는 열려 있는지 또는 닫혀 있는지를 나타내는 두 개의 클래스가 있습니다 (.box_open, .box_closed). 호버 기능은 box_open에 지정되어 있으므로 열려있을 때 헤더 위로 마우스를 가져 가면 화살표가 나타납니다. 그러나 상자가 닫힐 때 화살표가 보이기를 원하기 때문에 상자를 닫을 때이 작업을 원하지 않습니다. 상자가 닫히면 box_open 클래스가 제거되지만 해당 클래스에 할당 된 함수는 계속 작동합니다.

두 함수의 jquery 코드는 다음과 같습니다. 또한 아래의 데모 헤드에서 볼 수 있습니다.

// Display Arrow on Box Header Hover 

     $(".box_open").hover(
      function() { 
       $(this).find('a').show(); 
      }, 
      function() { 
       $(this).find('a').hide(); 
      } 
     ); 

    // Open and Close Boxes: 

     $(".box_header a").click(
      function() { 
       $(this).parent().next('.box_border').stop().toggle(); 
       $(this).parent().toggleClass("box_open"); 
       $(this).parent().toggleClass("box_closed"); 
       return false; 
      } 
     ); 

누구든지 문제가 무엇인지 살펴볼 수 있습니까? CSS 파일에서 Demo Url

Answer 1

이벤트 처리기는 클래스 레이블이 아니라 요소에 할당됩니다. 따라서 일단 할당되면 클래스 이름을 제거한다고해서 핸들러가 사라지는 것은 아닙니다.

'box_header'에 이벤트를 할당하고 hover() 코드에 'box_open'클래스가 있는지 확인하십시오.

$('.box_header').hover(
function() { 
    $(this).find('a').show(); 
}, 
function() { 
    if($(this).hasClass('box_open')) 
     $(this).find('a').hide(); 
}); 

편집 : 누락 된 괄호가 추가되었습니다. 조잡한 나!

Answer 2

넣어이 :

다음은 데모 URL입니다.

.box_closed a { 
    display: inline !important; 
} 

Answer 3

패트 릭의 대답은 정확하지만 더 나은 방법이 있습니다. jQuery.live()를 사용하면 "현재 셀렉터와 현재 또는 미래에 일치하는 모든 요소에 대한 이벤트에 핸들러를 첨부 할 수 있습니다. "

그래서,이해야 더 또는 덜 당신이 원하는 걸 얻을 :

$('.box_open').live('hover', function (event) { 
    if(event.type === 'mouseenter') { 
     $(this).find('a').show(); 
    } 
    else { 
     $(this).find('a').hide(); 
    } 
}); 

바로 the jQuery docs에서 거의 데친.