jquery jquery 클래스를 추가하지 않음

Question

간단한 탐색 메뉴를 시도했지만 간단하지만 클릭이 클래스를 추가하지 않는 이유는 무엇입니까? append는 테스트를 위해 그냥 있고 잘 작동합니다. 이미 그 클래스는 유혹에 의해 applyed되고 있기 때문이다 fiddle

Answer 1

:

$('.menu').on('click',function(){ 
     $(this).addClass('hovering'); 
     $(this).append('hello'); 
}); 

는 바이올린을 참조하십시오.

당신과 다른 클래스를 지정할 수 있습니다! 그 중요한 다음과 같이 ...

JQuery와

$('.menu').on('click',function(){ 
    $(this).addClass('hovering2'); 
    $(this).append('hello'); 
}); 

를 CSS

.hovering2{ 
    border:#000 1px solid; 
    background:#333 !important; 
} 

link to fiddler

Answer 2

jQuery를 호버 정말입니다 두 이벤트에 대한 리스너, mouseenter 및 mouseleave, http://api.jquery.com/hover/

코드가 작동하지만 클릭 한 후 mouseleave 이벤트 (.hover의 두 번째 기능)가 실행되면 '.hovering'클래스가 제거됩니다.

이 유스 케이스에서 CSS 의사 선택기는 호버 상태에서 시도하고있는 것을 달성 할 수 있습니다.

Answer 3

당신은 hover 이벤트에 toggleClass을 사용할 수 있습니다

$(".menu").hover(function() { 
    $(this).toggleClass('hovering'); 
}); 

제발하지 위의 클래스가 추가

.menu:hover { 
    background:#737373; 
    color:white; 
    font-weight:bold; 
} 

Answer 4

CSS를 통해 수행하지만 다른 같은 효과가 없습니다 될 수있다 코드는 이미 가져 왔을 때 이미 추가했으며, 요소를 나갈 때 코드도 제거합니다.

클릭 이벤트에 대해 다른 클래스를 사용하십시오.

CSS :

.selected { 
    background:#737373; 
    color:white; 
    font-weight:bold; 
} 

자바 스크립트 :

$('.menu').on('click',function(){ 
    $(this).addClass('selected'); 
}); 

먼저 .menu 클래스를 가질 수 있도록 당신이 그들을 추가 할 때 다음 다른이 우선합니다, CSS의 규칙을 정렬합니다. 동일한 특이성을 가진 규칙의 경우, 이후 지정된 규칙이 우선합니다.

데모 : http://jsfiddle.net/Guffa/aXfN8/5/ 내가 클래스는 당신이 가져가 울부 짖는 소리에 removeClass()를 갖고 있기 때문에, (밖으로 가져가에) 추가되지만 볼 수