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

Posted 2023-05-08

【中文标题】从外部按钮打开引导下拉菜单

【英文标题】：Opening a bootstrap dropdown menu from an external button

【发布时间】：2017-09-21 06:54:21

【问题描述】：

我正在从事一项工作，我的雇主想要一个使用 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" >
                </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");
    );
);

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

【参考方案1】：

这是一个选择

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

【讨论】：

谢谢@Richi Zee - 您的解决方案效果很好，唯一的问题是我需要使用 if/else 语句来确定滑出导航是否已经打开，这将决定是否运行 $( '.navbar-toggle').click();.但是你帮了我很大的忙，非常感谢！