자바 스크립트를 사용하는 액티브/호버립 상태

나는 아코디언 스타일 메뉴에 대한 활성 상태를 코딩하는 데 어려움을 겪고 있습니다. 마우스를 움직이면 메뉴가 계속 열려 있지만 사용자가 클릭하여 메뉴에서 마우스를 움직이면 스타일이 사라집니다.자바 스크립트를 사용하는 액티브/호버립 상태

다음 항목을 클릭 할 때까지 스타일을 유지하고 싶습니다. 여기에 일하고 있어요 무엇

예 : http://codepen.io/Sektion66/pen/dviJG

감사합니다!

출처

2013-04-16 user2284741

헤더를 클릭하면 toggleClass을 사용하여 클래스를 지정할 수 있습니다. 그런 다음 이미 사용중인 것처럼 일부 CSS 만 사용하십시오. 호버에 스타일을 지정하는 대신 클릭 할 때 스타일을 지정하면됩니다.

$(document).ready(function() { 
    $("ul.dd-header").click(function() { 
     var $el = $(this).find('ul.hidden'); 
     var $opened = $('.toggledDown').not($el); 
     $opened.toggleClass('toggledDown'); 
     $opened.slideToggle(); 
     $el.toggleClass('toggledDown'); 
     $el.slideToggle(); 
     $(this).toggleClass('toggleHeader'); 
    }); 
});

CSS :

.toggleHeader{ 
    border-left: 10px solid @blue; 
    background-color: #000; 

}

출처

2013-04-16 02:46:30

감사를 클릭 된 새로운 요소에 클래스를 추가 한 후 다른 선택한 요소에서 스타일을 제거합니다. 나는 밤새도록 이런 것들을 시도해 왔지만 그것이 효과가있는 것처럼 보이지만, 나는 어떤 이유에서든지 여전히 문제가있다. 아마 내 두뇌는 튀김입니다! 이 예제를 더 자세히 살펴보고 제대로 작동하지 않는지 확인합니다. – user2284741

잠시 걸어서 신선한 마음으로 이것을 보면서 ... 올바른 길로 나를 잡았습니다. 감사! – user2284741

@ user2284741 기꺼이, 보통 그것이 모두 걸립니다 :) –

은 기본적으로 당신이 요소에 선택된 요소를 정의하는 클래스를 전환 할 수 있습니다.

$('dd-main').click(function() { $('.selected').removeClass('selected'); $(this).addClass('selected'); });

이 예 에반에 대한

출처

2013-04-16 02:54:37 Justin

저스틴. 빠른 답변 감사합니다. 당신이 내게 준 예제 코드의 기본 아이디어를 이해합니다, 나는 그것이 현재 가지고있는 것에 어떻게 잘 들어 맞는지 확신 할 수 없습니다. 나는 불행히도 자바 스크립트를 사용하는 것에 익숙하다. .. 다시 한번 감사한다. – user2284741

자바 스크립트를 사용하는 액티브/호버립 상태

답변

관련 문제