부트 스트랩/jQuery를는 : 메뉴 바의 슬라이드 "활성"상태가 부트 스트랩 3 메뉴 바에서

Question

경우 활성 상태로 된 요소를 표시 할 수

가 jQuery로 I 간단한 함수 "스위치"를 생성 할 클릭시 한 요소에서 다른 요소로 활성 상태.

$('li').click(function() { 
    if (! $(this).hasClass('active')) { 
     $('li.active').removeClass('active'); 
     $(this).addClass('active'); 
     // Do more stuff here 
    } 
}); 

전체 예 : http://jsfiddle.net/zEh3h/2/

지금 내가 무엇을 달성하고자하는 클릭의 다른 하나 개의 요소에서 어두운 회색 배경의 "슬라이드"효과입니다. 또한 반응 형 수직 모드에서도 작동해야합니다.

이것을 달성하기위한 부트 스트랩 고유의 방법이 있습니까? 아니면 jQuery 해결 방법일까요? 나는 이것에 대해 문서에서 아무것도 찾을 수 없었다.

Answer 1

아마 그런 일 :

$('li').click(function() { 
    if (! $(this).hasClass('active')) { 
     $('li.active').removeClass('active'); 
     $(this).addClass('active'); 
     offsetTop = $(this).offset().top - $('.nav').offset().top; 
     offsetLeft = $(this).offset().left - $('.nav').offset().left; 
     $('.nav-background').animate({ 
      top: offsetTop, 
      left: offsetLeft, 
      right: $('.nav').width() - $(this).width() - offsetLeft, 
      bottom: $('.nav').height() - $(this).height() - offsetTop 
     }, 'slow', 'linear'); 
    } 
}); 

는 여전히 때 반응 수직 모드에서보기 변경이나 뒤로 배경의 위치를 ​​업데이트해야합니다.

jsFood : Example