Question

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

目前我正在处理导航部分。我遇到的问题是我在导航中的菜单下拉列表中有一个登录表单（此时占位符）。在移动设备上，表格会在下拉菜单中进行补充，但是在固定的顶部标题栏标题中添加了一个单独的图标按钮＆＃34;登录＆＃34;它位于汉堡菜单附近，即使主导航关闭也可见。下面是我的代码：

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中看到），但我还没有能够添加＆＃34;打开＆＃34;到li class =＆＃34; dropdown login-dropdown＆＃34;和/或将aria-expanded属性更改为＆＃34; true＆＃34;在登录锚标记上。我已经尝试了许多不同的方法，但在你的下方，我会找到我现在拥有的东西：

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

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

1 个答案: