Issue with tab focus causing dropdown menu to be unresponsive

I'm currently experimenting with a bootstrap example featuring a dropdown menu.

Here is the live example: http://jsfiddle.net/p73vc8Lv/

My goal is to have the dropdown menu display when the user clicks on the link. I've attempted to achieve this using CSS and JavaScript.

CSS:

.dropdown-toggle a:focus > .dropdown-menu { display:block }

Is there a way to accomplish this? Thank you

Answer №1

Your question isn't completely clear to me, but if you're looking to make the dropdown toggle when you tab onto it, you can achieve this using JavaScript.

$('.dropdown-toggle').on('keyup', function(e) {
    if (e.keyCode === 9) {
        $(this).dropdown('toggle');
    }
});

Check out this example here: http://jsfiddle.net/q8nzhLbm/2/

Answer №2

Give this a shot without needing to include custom JS:

SAMPLE:

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
<nav class="navbar navbar-inverse ">
              <div class="container">
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#">Bootstrap theme</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li class="dropdown">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                      <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li class="dropdown-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                      </ul>
                    </li>
                  </ul>
                </div><!--/.nav-collapse -->
              </div>
            </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on implementing a Javascript function triggered by a user's click within the video player frame

<script> function greet() { alert("hello"); } </script> <iframe width="100%" height="315" src="https://www.youtube.com/embed/AGM0ibP1MRc" onclick="greet()"></iframe> .Kindly assist me, please. ...

The CSS file is causing the footer to be cut off from the page and

My webpage is not scrolling properly when I add a lot of content, causing the footer to get cut off. I have tried various solutions found in other questions, but none have worked for me. Can anyone offer any suggestions or advice to fix this issue? html ...

Utilizing a combination of a `for` loop and `setInterval

I've been encountering an issue for the past 3-4 hours and have sought solutions in various places like here, here, here, etc... However, I am unable to get it to work in my specific case: var timer_slideshow = {}; var that, that_boss, has_auto, el ...

Ajax fails to transmit data to PHP script

Having encountered an issue with my script that prevents sending data from AJAX to a PHP file, I decided to debug it by logging the form data before running it through the AJAX function. The data obtained was as follows: Form: name=jim&email=info%40te ...

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

How can the distinctions between two bars be illustrated in high charts?

Is there a way to display different values on a new line between two bar charts using Highcharts plugins? I have created a simple bar chart in Highcharts, but I am looking to show the difference between the two bars on a new line. The concept is illustrate ...

What is the most effective way to showcase the value of a field nested within an object?

I am struggling to frame my question correctly and finding the right information on Google. Therefore, I will provide a simple example instead. If you can assist me by answering my question or guiding me in the right direction, I would greatly appreciate i ...

Can you explain the functionality of icon maps (or charts)?

As I was exploring the source code of various websites, I noticed a common pattern - all the icons were stored in one image map. Upon further investigation, I discovered that each icon is referenced individually when needed. I came across a helpful article ...

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

This code snippet is functioning correctly, however, I have a suggestion to make it more appropriate. Instead of using '::before', why not try using '::marker'? I attempted this adjustment but encountered an issue. Can anyone explain wh ...

Exclude items from AngularJS watch list

Is there a way to manually run a digest loop on specifically selected watches? Take, for example, the scenario where I need a directive that constantly displays the current time (including seconds), but without triggering the digest loop every second. One ...

What is the best way to send form data using AJAX with Braintree Transparent Redirect?

Utilizing Python and JQuery in this scenario... In the past, we relied on a standard form.submit(); within the submitHandler of the validation (JQuery plugin) call. The submission was made to Braintree's transparent redirect URL with the redirect-to ...

Having trouble uploading a file using jQuery AJAX

index.html is: <form id="fileupload" method="POST" action="UploadHandler.php" enctype="multipart/form-data"> <input type="file" id="files" name="files[]" multiple="multiple" title='Click to add Files'> <input type="hidd ...

JavaScript - Utilizing jQuery to dynamically add and remove input fields

I have a form where input fields (groups) are added dynamically. Here's a glimpse of the complex form: FIDDLE The error on the console reads: Error: uncaught exception: query function not defined for Select2 s2id_autogen1 With existing fields in t ...

Is there a way I can link a variable to a URL for an image?

Creating v-chip objects with dynamic variable names and images is causing an issue. The image source string depends on the name provided, but when I bind the name to the source string, the image fails to load. Despite trying solutions from a similar questi ...

Hide and display elements in a jQuery Mobile listview, but search functionality is disabled

Encountering an issue with Jquery Mobile 1.2 where a listview child that is hidden and then shown cannot be searched properly. To see the problem in action, check out this example. When loading the page, two listview children and a search box are created ...

Placing a table within a div causes the div to expand in width beyond 100%

A situation has arisen where a table with a large number of columns (30 columns) is being affected by the white-space:nowrap style set on each th tag, causing the parent div to stretch unnaturally. How can this issue be resolved and allow for a horizonta ...

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

What caused the auto resize feature of the Automatic Image Montage jQuery plugin to malfunction?

Apologies in advance if my issue is a bit convoluted. I've integrated the Automatic Image Montage jQuery plugin into a page I'm currently working on. However, I seem to have disrupted the functionality that automatically resizes images when the w ...

Adding a uniform header and footer across all pages simultaneously in HTML

I am currently working on a project where I want to apply the same header and footer design from my homepage to all pages. However, I need a method that allows me to update the header and footer in one place, so that any changes I make will automatically r ...

Using a combination of PHP and JQuery, I noticed that adding an IF statement within the document ready function

In the (document).ready function, the code below is used to properly display the order form: <?php if (isset($_POST['preview-order'])) { //IF PREVIEW FORM ?> $("#cam-order-preview").show('slow'); <?ph ...