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



我正在从事我的雇主使用Bootstrap 3的响应网站的工作,但他们不希望在其现有桌面网站上进行视觉上的任何变化(显然不是理想,但我无法控制(。

目前我正在研究导航部分。我遇到的问题是,在导航中的菜单下拉菜单中,我有一个登录表格(目前是占位符(。在移动设备上,下拉列表中的reamins形式,但在固定顶部标题标题"登录"中添加了一个单独的图标按钮,该按钮位于汉堡菜单附近,即使关闭了主导航,也可见。以下是我的代码蛋白:

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,Ive能够将重点转移到登录下拉菜单(您将在Codepen中看到(,但是我还没有能够将" Open"类添加到Li class ="下拉菜单"下拉下。登录dropdown"和/或将aria扩展的属性更改为登录锚标签上的" true"。IVE尝试了多种不同的方法,但在下面您会找到我当前拥有的东西:

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

对此的任何帮助将不胜感激!

这将是一个选项

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

最新更新