Tips for showcasing a drop-down menu using Jquery

I am currently utilizing jQuery to showcase a drop-down menu. It is successfully working for a single menu and displaying the appropriate drop-down. However, when I attempt to use more than one menu, it displays all of the drop-down menus simultaneously. I realize that I am passing the same class in jQuery, but how can I utilize the same class in multiple menus? Is this even possible?

Please take a look at my output in the provided snippet. Upon hovering over Menu-1, it also reveals the drop-down menus for Menu-2 and Menu-3. I aim to display a single drop-down upon hover. Can anybody provide assistance with jQuery?

Here is the code block from my snippet:

$(function() {
$(".menu").hover(
function() { $(".sub").slideToggle(400); },
function() { $(".sub").hide(); }
);
});
a{
text-decoration: none;
}

.menu{
font-family: Arial;
color: #515151;
position: relative;
background-color: #763E9B;
width: 100%;
color: #fff;
}
(menu styles continue...)
(pre-existing script goes here)

javascriptjqueryhtmlcssdrop-down-menu

Answer №1

To target individual elements, it's recommended to use $(this). Here is an example:

$(function() {
  $(".main-list").hover(
    function() { $(this).find('.sub').slideToggle(400); },
    function() { $(this).find('.sub').hide(); }
  );
});

To clear floats in the `.menu`, you can add a `

` and apply CSS rule `clear: both`:

HTML:

<div class="menu">
  <ul>...<ul>
  <ul>...<ul>
  <div class="clear"></div>
</div>

CSS:

.clear {
  clear: both;
}

Take a look at this code snippet below:

$(function() {
  $(".main-list").hover(
    function() { $(this).find('.sub').slideToggle(400); },
    function() { $(this).find('.sub').hide(); }
  );
});
.clear {
  clear: both;
}

/* Other CSS styles go here */


<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<div class='menu'>
<ul class="main-menu">
<li class="main-list"><a class='hover-link'>Menu 1</a>
<div class="square">
<div class='sub'>
<ul class='sub-options'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</li>

<!-- Repeat similar code for Menu 2 and Menu 3 -->

<div class="clear"></div>

</div>

I hope this explanation proves beneficial!

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

The error message that keeps popping up - "jQuery is loading with dojoConfig, but $

Here is the configuration for dojoConfig: <script type="text/javascript"> dojoConfig = { async: true, parseOnLoad: false, packages: [ { name: 'jquery', location: '//ajax.googleapis.com ...

jquerydojo

Issue with Repeated String Test in JavaScript: Single Failure Detected

Currently tackling the Repeated String Challenge on HackerRank. The challenge description goes as follows: A string, denoted by s, consisting of lowercase English letters is repeated infinitely. With an integer, n, the goal is to determine and output the ...

javascriptarrays

Different ways to notify a React/Next.js page that Dark Mode has been switched?

I am in the process of creating my first basic Next.js and Tailwind app. The app includes a fixed header and a sidebar with a button to toggle between dark and light modes. To achieve this, I'm utilizing next-theme along with Tailwind, which has been ...

javascriptreactjsnext.jscytoscape.js

"Want to extend the current date (Y-m-d) by a few days? Here

On my form, there is a date input that I want to automatically set to the date that is 14 days from today. I know how to set the value to today's date, but how can I add 14 days to it? <p>Term:<br> <input type="date" name="term" i ...

phphtmldate

Using single quotation marks in Javascript

When the variable basis contains a single quotation mark, such as in "Father's Day", I encounter an issue where the tag is prematurely closed upon encountering the single quotation mark. 'success' : function(data) { div.innerHTML = &apo ...

javascripthtmltags

Tips for organizing AJAX code to show images and videos in HTML with a switch case approach

I have 2 tables, one for images and one for videos. Within my HTML code, I have three buttons: slide_image, video, and single_image. Using iframes, I am able to load images and videos on the same page. When I click on the slide_image button, it displays im ...

javascriptphphtmlajax

Looking to add the Ajax response data into a dropdown selection?

Looking to add select options dynamically, but unsure how to retrieve response values. I am able to fetch all the values in the response, but I struggle with appending them correctly in the select option. I believe the syntax is incorrect. success: funct ...

javascripthtmlajaxlaravel

Items on Bootstrap have been expanded to fit larger screens

I'm currently working on a webpage () and facing an issue with the size of objects on a specific screen resolution. When users click on items in the accordions, multiple information cards are displayed. However, on larger screens, these cards appear ...

htmlcsstwitter-bootstrap

Customizing response headers in vanilla Node.js

My Node.js setup involves the following flow: Client --> Node.js --> External Rest API The reverse response flow is required. To meet this requirement, I am tasked with capturing response headers from the External Rest API and appending them to Nod ...

javascriptjsonnode.js

Adjust the size of the font based on the screen resolution

What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze <div class="centerbreaking"> <section id="breaking-news"> <div id ...

htmlcsstext

Get the package from a Lerna-managed monorepository using a git URL

Currently working on a project using yarn. The project has a dependency that is part of a larger monorepo managed by lerna. Despite the subpackage being updated, it has not been published yet and I require access to that unreleased code. Is there a method ...

javascriptnpmyarnpkglernamonorepo

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

phphtmltemplatescss

Storing blank information into a Mongodb database with Node.js and HTML

Can someone please assist me with solving this problem? const express=require("express"); const app=express(); const bodyparser=require("body-parser"); const cors=require("cors"); const mongoose=require("mongoose"); ...

javascriptexpressmongoosexpathnodejs-server

Searching for a different method in JavaScript that can add items without duplication, as the prependTo function tends to insert multiple items

Every time my code runs successfully, a success message is generated and displayed using prependTo within the HTML. However, the issue arises when the user performs the successful action twice, resulting in two success messages being shown on the screen. ...

javascriptjquery

Is it necessary to use callbacks when using mongoose's findbyid with express to retrieve an object from the database? Are callbacks still important in modern JavaScript frameworks?

I'm currently exploring the express local library tutorial on MDN docs and wanted to try out returning an object without relying on a callback method. When I provide the request object parameter for the id to the findById mongoose method like this va ...

javascriptnode.jsexpressmongoosecallback

The issue arises in Selenium IDE when a variable is mistakenly identified as a string instead of a

Hey there, I've encountered an issue while using Selenium IDE. I'm trying to increment a variable by two, but instead of performing numerical addition, it seems to be concatenating strings. <tr> <td>store</td> <td> ...

javascriptselenium

Running JavaScript code along with HTML elements extracted from a jQuery ajax callback

Alternatively, not exactly "executing," but rather updating a pre-existing function with a function returned in the response. Step 1 I have an HTML5 page detailing a specific location. The server-side includes a ColdFusion file called "MapFunction.cfm" ...

javascriptjqueryajaxhtml

Using Angular to assign a CSS variable to the before/after pseudo-classes

Having trouble passing a variable with [ngStyle] and reading it on the ::before class, any guidance in the right direction would be much appreciated! CSS: .handle-slider__control { height: 7px; z-index:1; background: $colour-alto; positi ...

htmlcssangular

Modifying the color of the error icon in Quasar's q-input component: a step-by-step guide

https://i.stack.imgur.com/4MN60.png Is it possible to modify the color of the '!' icon? ...

javascripthtmlcsstypescriptquasar-framework

Invoking a HTTP request in a web service using the link method

Upon the initial page load, a successful RESTful call is made to retrieve data. However, when clicking on the left navigation links that display this data, another RESTful call needs to be made. I am attempting to achieve this functionality within the link ...

javascriptjqueryangularjsrest