부트 스트랩 3 .navbar- 토글 전환 상태

Question

부트 스트랩 3.0을 사용 중이며 모바일 사이트에서 작업 중입니다. navbar가 축소되면 button.navbar 토글의 배경색을 변경하는 방법을 찾으려고합니다.

기본적으로 navbar 메뉴가 열렸을 때 휴대 기기에 '누른'상태를 표시하는 방법이 무엇입니까?

Answer 1

부트 스트랩 스타일 시트 뒤에이 스타일을 추가하십시오.

<style> 
.navbar-default .navbar-toggle { 
    border-color: #563D7C; 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #563D7C; 
} 
</style> 

Answer 2

또한 시도 할 수 있습니다 : 모바일 장치에서 더 :hover가 없기 때문에

.navbar-default .navbar-toggle, 
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
background-color: #c0d730; 
} 

Answer 3

나는, :hover하여 스타일을 좋아하지 않는다. 또한 :focus 스타일은 최적이 아닙니다. 토글을 클릭하여 탐색을 닫으면 :focus이 토글 상태를 유지하지만 사용자는 더 이상 탐색과 상호 작용하지 않기 때문입니다. 그래서 그것은별로 의미가 없습니다.

자바 스크립트로 토글 버튼에 클래스를 설정하는 것이 좋습니다. 부트 스트랩에는 묶는 것을 잡을 수있는 이벤트가 있습니다.

$('#myNavigation') 
    .on('shown.bs.collapse', function() { 
    $('#myNavigationToggle').addClass('active') 
    }) 
    .on('hidden.bs.collapse', function() { 
    $('#myNavigationToggle').removeClass('active') 
    }); 

문서 : http://getbootstrap.com/javascript/#collapse-events