2013-06-04 7 views
-2

대학의 인트라넷을 부트 스트랩 템플릿으로 마이그레이션하고 있습니다. 그렇게하면서, 우리는 다양한 선거구에 대한 접을 수있는 메뉴를 추가하기를 원했습니다. 당신은 여기에 결과를 볼 수 있습니다부트 스트랩 붕괴 요소 - 사용하지 않는 붕괴 요소

http://www.scrippscollege.edu/intranet/index2.html

각 메뉴 자체 (이 열리고 닫힙니다)에 의해 올바르게 응답하지만, 어떻게 우리가 그것을 할 수 있도록 학부 메뉴를 사용하면 그 반대의 경우도 마찬가지 학생 하나, 또는 종료하는 것이?

해당 코드를 추가하기 위해 업데이트되었습니다.

<div id="menu-students" class="collapse clearfix hidden-phone"> 

<div id="menu-faculty" class="collapse clearfix hidden-phone"> 

<div id="menu-staff" class="collapse clearfix hidden-phone"> 

는 아코디언 방법/분류는 메뉴 시스템에 적용 할 수 없습니다 : 여기

<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-students" href="#">Students</a></li> 
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-faculty" href="#">Faculty</a></li> 
<li><a class="nav-menu" data-toggle="collapse" data-target="#menu-staff" href="#">Staff</a></li> 

그리고 각각의 시작 위의 코드 언급으로 전환 DIV있다 : 여기 메뉴의 목록 항목입니다 우리처럼? 내가 본 모든 예제는 스택 된 링크를 포함합니다.

+0

메뉴를 처리하고 시도한 것을 알려주는 코드 조각을 보여 주셔야합니다. –

답변

1

열려있는 다른`축소 'div는 jQuery를 사용하여 숨길 수 있습니다. 뭔가 같은 .. 접을 수있는 요소에 대해 예상 네이티브 행동, 당신은 접을 수있는 요소 그룹을 구축하고 올바르게 data-toggle, data-parenthref 속성을 정의하고 있는지 확인입니다

$('#menu-top-menu [data-toggle=collapse]').on('click', function (e) { 
    $('.collapse').not($(this).data("target")).collapse('hide'); 
}); 
+0

질문에 '아코디언 그룹'의 기본 동작을 묻는 경우 아코디언 동작을 해킹 할 필요가 없다고 생각합니다. – albertedevigo

+1

주요 질문은 실제로 기본 동작을 요구하지 않았으며 오히려 아코디언 구조에서 분리 된 비슷한 기능을 요청했습니다. 이 답변 +1. –

0

. documentation의 예를 따르십시오.

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
       Collapsible Group Item #1 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse in"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo"> 
       Collapsible Group Item #2 
      </a> 
     </div> 
     <div id="collapseTwo" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       Anim pariatur cliche... 
      </div> 
     </div> 
    </div> 
</div>