재설정 CSS 배경 이미지

Question

나는 다음과 같은 jQuery를 사용하여 아코디언 형 메뉴를 만들려고 해요 :

function initMenu() { 
    $('#menu ul').hide(); 
     $('#menu li a').click(
      function() { 
       $(this).next().slideToggle('normal'); 
       $(this).css("background", "url(customnav_selected.png) top right"); 
      } 
     ); 
} 
$(document).ready(function() {initMenu();}); 

내가 그것을 확장 메뉴 링크 메뉴 헤더 배경 변경을 클릭 할 때이 지점으로 작동합니다.

그러나 메뉴를 축소하려면 두 번째 클릭 할 때 다시 변경하고 싶습니다.

아무도 도와 줄 수 있습니까? 대신이의

Answer 1

:

$(this).css("background", "url(customnav_selected.png) top right"); 

은 CSS 클래스로 해당 스타일을 넣고 toggleClass 대신 css, 예를 들어, 사용

$(this).toggleClass("selected"); //assuming a class of .selected 

그래서 클릭 처리기가됩니다를 :

$('#menu li a').click(function() { 
    $(this).next().slideToggle('normal'); 
    $(this).toggleClass("selected"); 
}); 

및 스타일 :

<style> 
.selected {background: url(customnav_selected.png) top right} 
</style> 

Answer 2

배경 이미지를 없음 (또는 초기 값)으로 설정하십시오.

클래스를 CSS 속성보다 특정 HTML 요소에 직접 설정 한 다음 클래스를 추가/제거하는 것이 더 쉽습니다.

Answer 3

배경 스타일을 빈 문자열로 설정하면 스타일 시트에서 벗어난 스타일로 되돌려 야합니다. 이것은 기본 스타일이 스타일 시트에 있다고 가정합니다. 수동으로 재설정하지 않아도됩니다.