引導程序下拉菜單的多個觸發器

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

嘗試你的榜樣，我是不是能夠成功打開菜單，因爲單擊任一鏈接或圖片打開菜單，而是直接關閉因爲頁面重新加載之後。

也許嘗試這段JavaScript代碼來代替：

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

這阻止鏈接的默認行爲 - 也許這是你在你的問題是什麼之後。請讓我知道如果不是！

最好的問候，

塞巴斯蒂安