부트 스트랩 드롭 다운 메뉴의 다중 트리거

Question

최신 부트 스트랩을 사용하면 구현 방법 이외의 드롭 다운 메뉴를 트리거 할 수있는 더 나은 방법이 있습니까? 아마도 데이터 속성 부트 스트랩 만 사용하는 솔루션은 특정 컨트롤을 대상으로 노출합니다.

북 아이콘과 앵커 텍스트를 사용하여 동일한 드롭 다운을 실행하는보기입니다.

코드

http://plnkr.co/edit/kCbzZiEKiQZuNoLY2lNa?p=preview

<script> 
$(function() { 
    $("#iconTrigger,#anchorTrigger").click(function() { 
     $("#ulEducationCenterDropDown").toggle(); 
    }); 
}); 
</script> 

<!-- trigger #1 --> 
     <a id="iconTrigger" href="" title="Resources &amp; Education"> 
      <img src="http://lorempixel.com/200/200/" alt="Resources &amp; Education" /> 
     </a> 

     <div style="display:inline;"> 
       <div class="btn-group" > 
        <!-- trigger #2 --> 
        <a href="" title="Resources &amp; Education" id="anchorTrigger">Resources &amp; Education <span class="caret"></span></a> 
        <ul id="ulEducationCenterDropDown" class="dropdown-menu" role="menu"> 
         <li><a href="/education-center/top-faqs">Top 12 FAQs</a></li> 
         <li><a href="/education-center/home-buyers-guide">Home Buyers Guide</a></li> 
         <li><a href="/education-center/understanding-credit">Understanding Credit</a></li> 
         <li><a href="/education-center/determining-rates">Determining Rates</a></li> 
         <li><a href="/education-center/mortgage-terminology">Mortgage Terminology</a></li> 
         <li><a href="/education-center/starkey-calculators">Calculators</a></li> 
        </ul> 
       </div> 

      <p>Resources for your home buying research.</p> 
     </div> 

Answer 1

물론, 당신이 collapse 구성 요소를 사용할 수 있습니다 ..

는

data-target="#ulEducationCenterDropDown" data-toggle="collapse" 

데모 : http://www.bootply.com/iVDcZKYg2a

Answer 2

귀하의 예제를 시도, 내가 링크 또는 이미지 중 하나를 클릭하면 메뉴를 열 때문에, 성공적으로 메뉴를 열 수 없습니다하지만 직접 종료 이후에 페이지가 다시로드됩니다.

아마 대신 자바 스크립트 코드를 시도 :

$(function() { 
    $("#iconTrigger,#anchorTrigger").click(function (e) { 
     e.preventDefault(); 
     $("#ulEducationCenterDropDown").toggle(); 
    }); 
}); 

이 링크의 기본 동작을 방지 - 어쩌면 이것은 당신이 당신의 질문에 후였다 것입니다. 그렇지 않으면 알려주세요!

안부,

세바스찬