So I have a navbar with a couple dropdown menus. Long story short, it's hard-coded into our site, and we need to find a way to trigger these dropdowns without the mouse. I have tried other methods, but as of now I want to use this one:

As a blind user tabs through the menu, I would like the dropdowns to open when they receive focus. I believe I just need the correct syntax to actually trigger this but I cannot find it. I am using this jquery:

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

My problem seems to lie within the .navbar-toggle("open"); (wrong syntax) I am simply trying to figure out how this dropdown will open as it es into focus? Any help will be much appreciated, here is some of the dropdown HTML incase it helps:

<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;
    }
}

So I have a navbar with a couple dropdown menus. Long story short, it's hard-coded into our site, and we need to find a way to trigger these dropdowns without the mouse. I have tried other methods, but as of now I want to use this one:

As a blind user tabs through the menu, I would like the dropdowns to open when they receive focus. I believe I just need the correct syntax to actually trigger this but I cannot find it. I am using this jquery:

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

My problem seems to lie within the .navbar-toggle("open"); (wrong syntax) I am simply trying to figure out how this dropdown will open as it es into focus? Any help will be much appreciated, here is some of the dropdown HTML incase it helps:

<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;
    }
}

• javascript
• jquery
• twitter-bootstrap
• drop-down-menu

Share Improve this question Follow edited Oct 14, 2015 at 16:45 HerbalChaos420 asked Oct 14, 2015 at 15:48 HerbalChaos420HerbalChaos420 14711 gold badge22 silver badges1414 bronze badges 4

• Also post the CSS associated with your drop down – AGE Commented Oct 14, 2015 at 15:50
• just use .navbar-toggle() (no parameters). – Jonathan Lam Commented Oct 14, 2015 at 15:50
• still no luck, I have edited the question to include the CSS – HerbalChaos420 Commented Oct 14, 2015 at 16:17
• NOTE: the dropdown does open on mouse hover, just doesn't react when tabbed to on keyboard – HerbalChaos420 Commented Oct 14, 2015 at 16:49

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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

Inspired by this : jQuery handing both focus and click on an element.

The idea is to detect if it was a focus after a tab or a mouse click.

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

    });

Hope this is an acceptable answer to your question.

you can try this.

$("#testF").select2();
$("#testF").next(".select2").find(".select2-selection").focus(function() {
    $("#testF").select2("open");
});

Upon trial and error I reached my desired results (almost, need to blur away now so it doesn't stay open, tips wele!) with the following code:

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

        });
    });

this my solution:

$("#dropdownMenuButton").on("focus", elements => {
    var element = elements.currentTarget;
    $(element).dropdown("toggle");
})

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf8">
        <title>Page Title</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn./bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <main class="container">
            <div class="row">
                <div class="col-xl-12">
                    <h1>Teste de Menu</h1>
                    <div class="dropdown dropright">
                            <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Menu
                            </button>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <a class="dropdown-item" href="#">Action</a>
                                <a class="dropdown-item" href="#">Another action</a>
                                <a class="dropdown-item" href="#">Something else here</a>
                            </div>
                    https://stackoverflow./questions/33129942/open-a-dropdown-menu-when-it-receives-focus-via-jquery#    </div>
                </div>
            </div>
            
        </main>
        <script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn./bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>      
    </body>
</html>