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

Exploring VueJS Router History Mode with NGinx web server

After conducting research, I discovered several issues similar to the one I am facing. Currently, I have a docker-compose setup on Digital Ocean with NGinx, VueJS, and a Static Landing Page. Everything was working fine until I added a new route with a fo ...

javascriptdockervue.jsnginxvuejs2

Encountered an issue while attempting to load the required module

I'm having trouble setting up Stripe for my app and getting errors when trying to implement the module. Typically, I would require the module at the top of the file in order to use it, but when I do this in the paymentCtrl file, it doesn't work a ...

javascriptangularjsnode.jsexpressstripe-payments

Changes in menu layout in response to window resizing

The menu needs to be centered on the website and adjust to the browser window resizing. Currently, it's positioned in the center and the animation is working fine. However, when I attempt to make the menu responsive so that it stays centered when resi ...

javascriptjqueryhtmlcss

Tips for passing the indexes of an array within nested ngFor loops in Angular

I have a 2D grid in my component that is created using nested ngFor loops, and I want to make certain grid elements clickable under specific conditions so they can call a function. Is there a way for me to pass the index of the clicked array element to the ...

javascriptangulartypescriptngfor

Uploading files using Ajax without the need for additional plugins or submitting a form

I have been struggling to find a solution for uploading files via Ajax when the input field is not enclosed within a form tag. I have already attempted this method. This is the HTML snippet: <span id="user-image-up-btn">Upload Image</span> &l ...

phpjqueryajaxinputupload

React-select-pagination is failing to retrieve data while scrolling

Struggling to load over 20,000 options using react-select from a Node API database? The page was barely loading until I implemented "react-select-async-pagination". However, there's a problem - the data is only fetched once. import React, { useRef, us ...

javascriptnode.jsreactjspaginationreact-select

The Javascript logic on the NewForm for a Sharepoint 2013 on-premise list is failing to trigger

Screen shot linkThere seems to be an issue with the code I have written. The save button should only be enabled if all 5 checkboxes are ticked, but currently, the button is not disabled on form load. I have tried adding the code in both CEWP and SEWP, bu ...

javascriptjquerylistvalidationsharepoint-2013

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

htmljsonspring-bootoauth-2.0spring-security-oauth2

Is it possible to save the video title as a variable using YTDL-core?

Is there a way to store the video title as a global variable in JavaScript? ytdl.getBasicInfo(videoURL, function(err, info) { console.log(info.title) }); I have been trying various methods but I am unable to successfully define a variable to hold the v ...

javascriptnode.jsdiscord.js

Alter the font color upon clicking the menu using jQuery

When I click on the menu and sub-menu items, I want to change their colors along with their parent. You can see an example of how I want it to work here. However, currently, when I click on a sub-menu item, the color of the parent menu item gets removed. ...

javascriptjqueryhtmlcss

Create a canvas and include input boxes in an HTML document

I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this. I have attempted to solve ...

javascripthtmlcss

Guidance on transferring servlet variables to an HTML page through redirection in Java

I am looking for a way to open an HTML page from my Java servlet and utilize the variables of that servlet to populate the form fields in the HTML page when it is opened. Below is the code snippet of my servlet: import java.io.*; import java.sql.*; impor ...

javahtmlservlets

Tips for maintaining the fixed size of a table header and preventing it from resizing in width

My goal was to create a table using divs with fixed headers while scrolling vertically. However, I encountered an issue where the header width seemed to shrink and became misaligned with the rows. Even setting the width to 100% did not resolve this probl ...

htmlcss

Tips for positioning the navbar to avoid covering the logo:

I am experiencing difficulty in aligning my navbar. When I resize the window, the navbar overlaps with the logo... Here is the Fiddle Here is the code: <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background: rgba(0,0, ...

htmlcsstwitter-bootstrap

Facebook pages that exceed 700px in length without the need for scrollbars

Is there a way to extend the length of a Facebook page without scrollbars when using an iframe, so that it doesn't crop at 700px? ...

phphtmlfacebook

When working with Node.js and Express, encountering the error message "data.push is not a

I am encountering an issue when trying to add a new task to the list of all tasks. The error message I receive is TypeError: allTasks.push is not a function data contains JSON data that has been retrieved from a file using the fs method var allTasks = JS ...

javascriptnode.jsexpress

Activating JavaScript in the browser only when a button is manually clicked, not by default

As I work on my website, which is currently being constructed, I rely heavily on JavaScript. However, a concern of mine is the potential for failure if a user has JavaScript disabled on their client side system. I understand that it is not possible to pro ...

javascriptjquery

Canvas - Drawing restricted to new tiles when hovered over, not the entire canvas

Imagine having a canvas divided into a 15x10 32-pixel checkerboard grid. This setup looks like: var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tileSize = 32; var xCoord var yCoord ...

javascriptjqueryhtmlcanvas

Top tip for combating form misuse in Django applications

Is there a reliable method to restrict form submissions in Django? I need the form to be submitted a maximum of 5 times from the same IP address within one hour. Can this restriction be implemented in Django? I experimented with Django Ratelimit, but unfo ...

pythonhtmldjangoforms

The iPython terminal is not displaying properly due to a constrained screen width

When my iPython displays a long list, it appears as one tall column instead of utilizing the full width of the terminal screen. I have attempted to adjust the CSS in '.ipython/profile_default/static/custom/custom.css' by setting '.container ...

pythoncssipython