當它通過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接收焦點時打開下拉菜單

回答

相關問題