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

JavaScript function to provide a range of numbers based on a specified number and step value

I am looking for a solution to dynamically generate content based on the number of slides/steps using JavaScript. Any suggestions on how to best achieve this? Thanks in advance! switch(this.currentSlide) { case 1: return '1-12'; ...

javascriptvue.jslogic

I am encountering an issue with identifying a directory in Node.js

This is my HTML code <div id="done_work_1" class="logo-slide-track"> </div> <script>$.ajax({ url: "/static/home/done/", success: function (data) { $(data).find("a").attr("href&q ...

javascriptjquerynode.jsexpress

Assigning the "checked" attribute to the checkbox based on its "value" parameter

Within a .cshtml form, I have a checkbox field that has the following attributes: @Html.CheckBox("InFooter", new { @class = "form-control", @id = "edit_rssFeed_InFooter" }) Currently, I am using ajax to set the value of the "value" attribute for this che ...

c#jqueryajaxasp.net-mvc

The use of backdrop-filter results in artifacts appearing in rounded corners

I am experiencing an issue with a CSS animation where I have an element that fades and child elements with a backdrop-filter to blur the background in Safari. There are two specific problems: The element's rounded borders are showing dark shadow ...

csssafaricss-transitionscss-animations

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

I created these custom cards using a combination of HTML, CSS, and JavaScript. However, I've noticed that the height transition animation is not as smooth as I'd like it to be, especially on certain pages. Is there a way to achieve this animation ...

javascriptjqueryhtmlcss

Merging two arrays together in JavaScript

Within my possession are two arrays: var g= [ { id: 36, name: 'AAA', goal: 'yes' }, { id: 40, name: 'BBB', goal: 'yes' }, { id: 39, name: 'JJJ', goal: 'yes' }, { ...

javascriptarraysjoin

The Selenium Action class is failing to perform a second mouse hover on the same web element

Actions action = new Actions(Driver); action.MoveToElement(webelement).ClickAndHold().Perform(); The code snippet above is used to perform a mouse hover on a Web Element, and it works perfectly the first time. However, when attempting to do the mouse hove ...

javascriptjavac#seleniumselenium-webdriver

My table elements are automatically being populated with <tr> elements thanks to Javascript

Upon viewing the screenshot: it is evident that each element is placed within its own tr. My preference is to have each element contained in a td and then wrap everything within a single tr. Here is the updated HTML structure: <div id='result&a ...

javascripthtml

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

What is causing the error "unable to access property 'map' of undefined" in my code?

Currently working on React + Redux and trying to implement a likes counter. However, encountering an error 'cannot read property 'map' of undefined'. Here is the code snippet for my Reducer: const initialState = { comments: [], ...

javascriptreactjsredux

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

javascriptjqueryhtml

Tips for managing variables to display or hide in various components using Angular

In this example, there are 3 main components: The first component is A.component.ts: This is the parent component where an HTTP call is made to retrieve a response. const res = this.http.post("https://api.com/abcde", { test: true, }); res.subscribe((r ...

javascriptangulartypescript

Ways to Adjust Website Scaling for Varying Screen Sizes

Is there a way to adjust my website's scale based on the device width, such as changing it to 0.7 for certain devices? The only information I've found so far is using the <meta> tag: <meta name="viewport" content="width=device-width, i ...

htmlcssmedia-queriesviewport

Using ThreeJs and TweenJS to insert a delay between tweens using a for loop

Struggling with animating a bin packing problem using Three.JS and Tween.JS. I am having difficulty getting the animation to play successively rather than all at once within my loop. Attempting to use the setTimeout solution has not been successful. Does a ...

javascriptthree.jstweenjs

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

javascripthtmlcsscodepen

Passing Data Between Blazor App Pages Using .NET Core

Recently, I began learning how to create websites using the Blazor template. I'm having trouble figuring out how to pass data from one page to another. It's quite different compared to .NET CORE MVC web applications and I haven't been able t ...

htmlasp.net-coreasp.net-core-2.0blazor

Using Three.js to load an image from a different domain

Despite searching extensively and reading through all available resources, I am unable to find a solution to my issue. I am currently running this code on a local server (IIS). My objective is to load an image from imgur and utilize it as a texture for an ...

javascriptthree.jscross-domain

What is the accurate user agent for Windows Phone?

Can someone explain why PHP and JavaScript produce different user agents? Which one is considered the accurate user agent? PHP User Agent Output: <?php print_r($_SERVER['HTTP_USER_AGENT']); ?> User Agent: Mozilla/5.0 (Mobile; Windows Ph ...

javascriptphpwindows-phone

Show the selected checkbox options upon clicking the submit button

Having trouble setting up a filter? I need to create a feature where checked values from checkboxes are displayed in a specific div after submitting. The display should include a 'Clear All' button and individual 'X' buttons to remove e ...

javascriptjquerycsscheckbox

Customize Your Google Maps with Checkboxes for Style Options

Trying to make dynamic changes in the style of a Google Maps using checkboxes. Some checkboxes control colors of features, while others control visibility. Having trouble figuring out how to combine different features of styles since they are not strings ...

javascriptgoogle-maps