引导下拉菜单的多个触发器

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();
    });
});

这可以防止链接的默认行为 - 也许这就是你在问题中所追求的。如果没有，请告诉我！

致以最诚挚的问候，

塞巴斯蒂安