Issue with Jquery focus on dropdown not working

I am facing an issue with setting up the dropdown feature for my list. It's similar to ul li:hover ul li. What I'm trying to achieve is something like ul li:focus ul li in jQuery because I don't think it can be done using CSS. The desired outcome is that when I click on a ul li element, a dropdown should appear.

HTML

<nav id="navbar">
  <div class="dropdown-btn">Go To...</div>
  <ul class="navbar-tab">
    <li class="navbar-tab-1 selected">Home</li>
    <li class="navbar-tab-1 select">Searches
      <ul class="hover-list select">
        <li><a>Search</a></li>
        <li><a>Rocks</a></li>
      </ul>
    </li>
    <li class="navbar-tab-1 select">Engagement Rings
      <ul class="hover-list select">
        <li><a>Verragio</a></li>
      </ul>
    </li>
    <li class="navbar-tab-1 select">Services
      <ul class="hover-list select">
        <li><a href="">Repair</a></li>
      </ul>
    </li>
  </ul>
</nav>

jQuery

$(".navbar-tab-1").focus(function(){
  $(".hoverlist li").css("display","block").fadeOut();
});
javascriptjqueryhtmlcss

Answer №1

Your code has a few issues that need to be addressed:

  1. focus doesn't work with the ul element. You should use hover instead.
  2. Make sure to change your class selector to .hover-list instead of .hoverlist
  3. All .hover-list elements should have display:none initially so they can be displayed when hovering over the ul.
  4. Consider using fadeIn() for a smooth fade-in effect when showing them.
  5. To provide a proper cursor pointer for the links, you can add cursor: pointer; to your ul elements in CSS.

$(".navbar-tab-1").hover(function(){
  $('.hover-list').css("display","none");
  $(this).find(".hover-list").css("display","block").fadeIn();
});
.hover-list{
  display: none;
}
.navbar-tab-1{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
    <div class="dropdown-btn">Go To...</div>
    <ul class="navbar-tab">
        <li class="navbar-tab-1 selected">Home</li>
        <li class="navbar-tab-1 select">Searches
            <ul class="hover-list select">
                <li><a>Search</a></li>
                <li><a>Rocks</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Engagement Rings
            <ul class="hover-list select">
                <li><a>Verragio</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Services
            <ul class="hover-list select">
                <li><a href="">Repair</a></li>
            </ul>
        </li>
    </ul>
</nav>

If you want to also hide the li items when the mouse is not hovering over the ul, consider using the mouseover and mouseout events instead of hover:

$(".navbar-tab-1").mouseover(function(){
  $('.hover-list').css("display","none");
  $(this).find(".hover-list").css("display","block").fadeIn();
});

$(".navbar-tab-1").mouseout(function(){
  $('.hover-list').css("display","none");
});
.hover-list{
  display: none;
}
.navbar-tab-1{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
    <div class="dropdown-btn">Go To...</div>
    <ul class="navbar-tab">
        <li class="navbar-tab-1 selected">Home</li>
        <li class="navbar-tab-1 select">Searches
            <ul class="hover-list select">
                <li><a>Search</a></li>
                <li><a>Rocks</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Engagement Rings
            <ul class="hover-list select">
                <li><a>Verragio</a></li>
            </ul>
        </li>
        <li class="navbar-tab-1 select">Services
            <ul class="hover-list select">
                <li><a href="">Repair</a></li>
            </ul>
        </li>
    </ul>
</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

Author Names Missing from Book List in Locallibrary Tutorial

After spending several years working on front-end development, I've decided to delve into back-end development to expand my skill set. Following the Basic Node and Express course from FreeCodeCamp Curriculum, I am now following the MDN Express Localli ...

javascriptnode.jsmongodbexpresspug

Adjusting the height of the Bootstrap Modal Container can be a challenging task, especially when there are changes in the

I've been struggling to figure out why my initial modal step is not initializing at the correct height. The angular directive I'm using to set the parent div's height doesn't seem to work on the first modal step. Any ideas why? You can ...

jqueryangularjsangularjs-directivebootstrap-modal

How to retrieve properties of the final item in an array using Vue.js

Struggling with Vue.js JavaScript implementation. This is the current code: <div id="app"> <h1>Items</h1> <div v-for="item in items"> <input v-model="item.val"> </div> <button @click="addItem"> Ne ...

javascriptarraysjsonvue.jsjavascript-objects

Chrome and Firefox: Images cling together

I've encountered an issue with my recently launched website. Some images in a grid appear to be stuck together, but this problem only occurs in Firefox and Chrome browsers. Oddly enough, zooming in to around 110% then back to 100% seems to temporarily ...

javascriptcsswordpressgoogle-chromefirefox

Challenge involving CSS and Javascript for solving puzzles

In my attempt to create a puzzle with 2 rows and 3 columns using CSS and JavaScript, I envision the pieces of the puzzle being black and cut into various shapes. The objective is for users to drag these pieces onto the board in order to complete it. I have ...

javascripthtmlcss

Monitoring changes in an array of objects using AngularJS's $watch function

Exploring the world of AngularJS, I'm on a quest to solve a challenging issue efficiently. Imagine having an array of objects like this: var list = [ {listprice: 100, salesprice:100, discount:0}, {listprice: 200, salesprice:200, discount:0}, {listpr ...

javascriptangularjs

The window.addEventListener function is failing to work properly on mobile devices

Hey there! I am facing an issue in my JS code. I wrote this code because I want the menu to close when a visitor clicks on another div (not the menu) if it is open. The code seems to be working fine in developer tools on Chrome or Firefox, but it's no ...

javascriptjquerycssresponsive-designmenu

Is it possible to merge two individually operational Jquery form elements into one cohesive unit?

Currently, I am in the process of constructing a form that utilizes Jquery-Elements such as sliders. Additionally, I have incorporated a Jquery-Plugin to enhance the dropdown element. Both components work flawlessly when they are kept in separate files. Ho ...

jqueryajaxforms

Updating the Likes count for a particular page using SignalR in MVC: A step-by-step guide

Having trouble with SignalR implementation in my MVC application. Whenever a user clicks the like button on a specific album post page, the likes count for all other pages gets updated as well. Here is the code for my NotificationHub: public class Notific ...

c#jqueryasp.net-mvcasp.net-mvc-4signalr

"Can someone provide guidance on extracting the ID from a JSON value and storing it in a

Hey there, I have come across this jQuery code snippet: var fbuid = zuck; var fbjson = $.getJSON("https://graph.facebook.com/"+fbuid); I am wondering how to extract the id directly from the JSON response into a variable : { id: "4", first_name: "Mark", ...

javascriptjqueryjson

Click on the link to access and activate the function

Currently, I am retrieving values from a text input field. Using jQuery: $('.submitLocation').click(function(){ // grabbing value from the input field var city = $(".city").val(); }); For HTML: <input type="text" name="city" class ...

jqueryhtml

What is the best way to modify the values in an initialized array once the fetchData method has been executed?

As a beginner in Vue.js, I am currently working on a project that involves updating initialized arrays in the data() section of my component using the fetchData method. Below is a simplified version of the code: <script> import axios from 'axi ...

javascriptvue.jschartsvisual-web-developer

Discrepancy between Laravel Vue: console logging Axios POST response and network response apparent

https://i.stack.imgur.com/vO05x.png Within my Laravel vue app's backend, I am noticing an inconsistency in the data being sent and received. Even though the data is supposed to be the same, the two console logs are showing slight differences. DATA ...

javascriptphpjsonlaravelvue.js

Transfer information from my class to a specific pathway

Currently, I am in the process of developing an application using Angular 2. My goal is to be able to send data from my class to a specific route within the application. Sample Code @RouteConfig([ { name: 'Slider', ...

javascriptangularjsangularsliderswiper.js

Changing guid bytes into a string using JavaScript

Currently, I am receiving an arrayBuffer from a WebSocket connection and within that, I am able to obtain a range of byte arrays representing a Guid created in C#. I am wondering how I can convert these Guid bytes to a string in JavaScript? Guid: "FEF38A ...

javascriptwebsocketbyteguidarraybuffer

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory

My PhpStorm 2019.2 keeps showing me a notification that the Button component from Material UI needs to have an added href prop because it is required. However, when I refer to the Material UI API, I see something different. Take a look at this screenshot: ...

javascriptreactjstypescriptphpstormmaterial-ui

Display/conceal within a jQuery fixed navigation bar (center-aligned)

I am facing challenges with creating a sticky menu that shows/hides with a click button. Considering abandoning the show/hide feature altogether and rebuilding it from scratch in the future. Two major problems I have identified: How can I make the sho ...

javascriptjqueryhtmlcss

What CSS property can be used to make short words wrap to the next line?

Is it possible to automatically identify if a line of text ends with a short word and then move it to the next line, so that the text flows smoothly? This would ensure a more organized layout. For instance, I envision the following text: Cascading Style ...

htmlcss

Is the value of the object in the array already present in another array of objects?

Plunker - http://plnkr.co/edit/jXdwOQR2YLnIWv8j02Yp In my angular project, I am working on a view that displays a list of users in the main container (array-A) and a sidebar with selected users (array-B). The first array (A) contains all users: [{ $$has ...

javascriptarraysangularjsfirebase

Sending the "Enter Key" using JavaScript in Selenium can be achieved by utilizing the "executeScript" function

I'm currently developing an automation flow using IE 11 with Selenium and Java. On a particular web page, I need to input a value in a Text Box and then press Enter. I have successfully managed to input the values using the following code: // The &ap ...

javascriptjavaselenium