从外部按钮打开引导下拉菜单

Question

我正在从事一项工作，我的雇主想要一个使用 Bootstrap 3 的响应式网站，但他们不希望在他们现有的桌面网站上进行任何视觉上的改变（显然不理想，但我无法控制）。

目前我正在处理导航部分。我遇到的问题是我有一个登录表单（此时为占位符）位于导航中的菜单下拉列表内。在移动设备上，表单在下拉列表中保留，但在固定顶部标题栏标题“登录”中添加了一个单独的图标按钮，该按钮位于汉堡菜单附近，即使在主导航关闭时也可见。下面是我的codepen：

http://codepen.io/v_for_vinsanity/pen/YVGZdb

我正在寻找一种在单击登录图标按钮时打开登录下拉菜单的方法。这是登录下拉菜单的代码：

<li class="dropdown login-dropdown">
              <a href="#" class="dropdown-toggle login-btn" data-toggle="dropdown" aria-expanded="false">Login <span class="caret"></span></a>
              <ul role="menu" class="dropdown-menu dropdown-menu-right">
                <li>
           <img src="http://placehold.it/350x300" alt="login-placeholder">
                </li>
              </ul>
            </li>

使用 jquery，我能够将焦点转移到登录下拉菜单（您将在 codepen 中看到），但我无法将“open”类添加到 li class="dropdown login-dropdown”和/或将登录锚标记上的 aria-expanded 属性更改为“true”。我尝试了许多不同的方法，但您会在下面找到我目前拥有的：

$(function(){
    $('.login-icon-btn').click(function(){
        $('.nav li.login-dropdown a').trigger('click');
        $('.nav li.login-dropdown').addClass('open');
        $('.login-btn').attr("aria-expanded","true");
    });
});

非常感谢您提供任何帮助！

Answer 1

这是一个选择

   $(function(){
        $('.login-icon-btn').click(function(){
            $('.navbar-toggle').click();
            $('.login-btn').click();
            return false;
        });
    });