当它通过Jquery接收焦点时打开下拉菜单

所以我有一个导航栏和几个下拉菜单。长话短说，它是硬编码到我们的网站，我们需要找到一种方法来触发这些下拉没有鼠标。我已尝试其他方法，但截至目前，我想使用这一个：当它通过Jquery接收焦点时打开下拉菜单

作为盲人用户通过菜单选项卡，我希望下拉菜单在他们获得焦点时打开。我相信我只是需要正确的语法来实际触发这个，但我找不到它。我正在使用这个jquery：

$(document).ready(function() { 
    $("#testF").on("focus",function() { 
     $(this).dropdown("open"); 
    }); 
});

我的问题似乎在于.navbar切换（“打开”）; （错误的语法）我只是想弄清楚这个下拉框将如何打开，因为它成为焦点？任何帮助将非常感激，这里是一些下拉HTML的柜面它可以帮助：

<li class="dropdown">          
    <a id="testF" href="#" class="dropdown-toggle" data-toggle="dropdown">Courses<span class="caret" /></a>          
    <ul class="dropdown-menu" role="menu"> 
     <li> 
      <a href="/home/BbDeepLink" target="_blank">All Courses (click here)</a> 
     </li>

CSS：

/* Menu */ 
    .navbar-default .navbar-nav > li > a{ 
     color:#222; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a { 
     color:#222; 
     background-color:#fff; 
    } 
    .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { 
     color:#fff; 
     background-color:#5396b1; 
    } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { 
     color:#fff; 
     background-color:#5396b1; 
    } 
    .dropdown-menu{ 
     padding:0px; 
    } 
} 

@media (min-width: 781px) { 
    ul.nav li.dropdown:hover > ul.dropdown-menu { 
     display: block; 
    } 
    /* Fixes: The main menu hover/focus dropdown issue */ 
    .navbar-default .navbar-nav .open ul { 
     display:none; 
    } 
    .navbar-default .navbar-nav .open:hover ul { 
     display:block; 
    } 
}

来源

2015-10-14 HerbalChaos420

也可以使用'.navbar-toggle（）'（无参数）将与您的下拉菜单相关联的CSS发布到 – AGE

。 –

仍然没有运气，我已编辑的问题，包括CSS – HerbalChaos420

$(document).ready(function() { 
    $("#testF").on("focus",function() { 
     $("#testF").click(); 
    }); 
});

来源

2015-10-14 15:51:42

请不要张贴代码的答案。提供信息以支持您的代码。 – Christian

在试验和错误我达到了我预期的效果（差不多，需要以下代码：

$(document).ready(function() { 
     $("#testF").on("focus",function() { 
      $(this).next(".dropdown-menu").toggle() 

     }); 
    });

来源

2015-10-14 16:57:33 HerbalChaos420

受此启发：jQuery handing both focus and click on an element。

这个想法是检测一个标签或鼠标点击后它是否是焦点。

var lastClick = null; 
    $('#testF').mousedown(function (e) { 
     lastClick = e.target; 
    }).focus(function (e) { 
     if (e.target != lastClick) { 
      $(this).dropdown("toggle"); 
     } 
     lastClick = null; 

    });

希望这是你的问题的可接受的答案。

来源

2016-12-16 14:04:12

当它通过Jquery接收焦点时打开下拉菜单

回答

相关问题