Whenever I click on an <a> element, the menu will expand

i am working on implementing a menu button with HTML and JavaScript code

HERE IS THE HTML

MENU

<div class="mobilenav"> 
  <li><a href="#">HOME</a></li> 
  <li><a href="#">SERVICES</a></li> 
  <li><a href="#">WORK</a></li> 
  <li><a href="#">TALK</a></li> 
</div>

ICON

<a href="javascript:void(0)" class="icon"> 
  <div class="MENU"> 
    <div class="menui top-menu"></div> 
    <div class="menui mid-menu"></div> 
    <div class="menui bottom-menu"></div> 
  </div> 
</a>

JS IMPLEMENTATION

$(document).ready(function () {
  $(".icon").click(function () {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  });
});

I made changes to the ".icon" selector to improve behavior, but now whenever I click on other buttons like scroll down or contact, the menu opens. Is there a way to prevent this from happening?

javascriptjqueryhtmlcsstags

Answer №1

$("a") selects all anchor elements on the webpage.

If you only want to select the elements with the class .icon along with the links inside the .mobilenav, then you should use $(".icon, .mobilenav a").

Remember that JQuery selectors function in a similar way to CSS selectors.

$(document).ready(function () {
  $(".icon, .mobilenav a").click(function () {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
  });
});

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 arrangement of a JSON array can be modified by AngularJS' Ng-repeat functionality

Hello everyone at SO: On March 18, 2014, I encountered a situation while trying to use ng-repeat. The elements inside the array, retrieved from a Json string, seem to be changing their original order. To clarify, the initial variables in the array pertai ...

javascriptjsonangularjsangularjs-ng-repeat

Expanding Images in Bootstrap 4 Carousel

I am encountering some difficulties with a basic carousel implemented using Bootstrap 4. The carousel contains 3 images with the class d-block w-100, which is supposed to make the images stretch to the full width of the screen. However, in my case, the ima ...

htmlcssbootstrap-4carousel

Tips for accessing a specific element within an array of objects

I have an array called options_hotel which contains 2 arrays (but can have more based on fetched data from the database) Both arrays have elements like ID, NOM, and ADRESSE : Array(2) 0: {ID: "1", NOM: "Le messager", ADRESSE: "30 ...

javascripthtmljquery

Attempting to eliminate a div element housed within an iframe by utilizing the onload event

Is there a way to remove specific div tabs from within an iframe by using the onload function set within the iframe itself? I want everything to be in one location for simplicity. It's important to note that I want to utilize the onload WITHIN this &l ...

javascripthtmlcssiframeonload

Responsive Bootstrap container with flexible column layouts

Forgive me if this sounds silly, but I'm struggling to find an answer for what I want to accomplish... I'm attempting to create a responsive container div (similar to a column inside a row). For example, I would like to achieve the following ef ...

csstwitter-bootstrapreact-bootstrapbootstrap-5

Exploring Advanced Querying Methods in Sequelize

I'm trying to display data with a gains value greater than 1, but I'm running into issues when using Postman with the following URL: http://localhost:3000/api/betHistory/winners The result I'm getting is: Executing (default): SELECT `id`, ...

javascriptnode.jsapiexpress

how to style field color for invalid input in angular reactive forms

I am currently working with ReactiveForms and I am having trouble finding a way to modify the color of the form field outline when the input is considered invalid. It is important for me to adjust this color because the current red shade does not blend we ...

htmlangularangular-reactive-formsangular-forms

Tips on saving every query outcome in a separate array and delivering it back to the controller upon completion

I am currently facing an issue where I receive data in a function from my controller, and inside my model function, I need to retrieve results using a query with a dynamic value of channel. The channel ID will be coming from each checkbox on my HTML view ...

javascriptphpajaxcodeigniter

Exploring querying techniques in Node.js

Hi there, I'm new to asking questions and I'm really hoping to find some answers here. I am just starting out with JavaScript so please explain things in simple terms. So here's my issue - I'm not sure how to properly query. - Should ...

javascriptnode.jsmongodb

How to Align an Image in the Center of a DIV Even if the Image is Larger Than the

Having trouble with aligning images of different sizes in a DIV. I found a solution on StackOverflow (How to vertically align an image inside div) that uses a <SPAN> as a dummy element with vertical-align: middle. It works well for resizing larger i ...

cssimagehtmlalignmentcenter

The chart refreshes whenever there is a change in the component's state

Whenever I click the button to use the changeState method, the state changes and the MoreInfo component appears. However, the chart is being drawn again as shown in this GIF: Below is the code snippet: import React from 'react' import './Ho ...

javascriptreactjslightweight-charts

Ensure that jQuery Accordion sections are set to closed by default upon page load

I recently added the jQuery Accordion to my website. Despite not being familiar with jQuery, I attempted to modify some settings so that all sections of the accordion remain closed when the site is loaded. However, after making these changes, the functiona ...

jqueryjquery-pluginsaccordion

Navigation bar not functioning properly due to stickiness

I am currently working on a project where I need to apply a 'fixed' class to a menu when the user scrolls down to that section. While I have successfully implemented this feature, I am facing difficulties in removing the class once the user scrol ...

javascriptjqueryhtmlcss

Creating a PDF from HTML within an Ionic application

When trying to generate a PDF from an HTML page using the CORDOVA.PDF.GENERATOR plugin, I encountered an issue - the generated PDF lacked styling. Ideally, I want the PDF to mirror the style of the original HTML page. Is there a way to instruct the plugin ...

javascriptangularionic-frameworkionic3cordova-plugins

Assigning information to a button within a cell from a dynamically generated row in a table

I've been diligently searching through numerous code samples but have yet to find a solution to my current dilemma: My HTML table is dynamically generated based on mustache values and follows this structure: <tbody> {{#Resul ...

javascriptjqueryhtmlajaxbootstrap-4

I have developed a website that can calculate the factorial of any given number. The next step is to design a function that will display the step-by-step mathematical process

Could use a hand with this one. The function below is empty and I'm a bit stuck on what to do next. Right now, the webpage displays the factorized number, but I want to show the mathematical equation before it, like so: User inputs: 3 Site outputs: " ...

javascriptjqueryfunction

Having difficulty implementing DragControls

My experience with three.js is at a beginner level, and I recently attempted to incorporate a feature allowing the dragging of a 3D model. During this process, I encountered DragControl but faced difficulty implementing it in my code. Upon using new DragCo ...

javascriptjqueryhtmlthree.jsdrag-and-drop

Experiencing problems with website loading due to jquery?

Recently, I've been experiencing slow loading times on my website . It's taking about a minute for the site to load properly, but strangely, if I click on the stop loading button, the site loads instantly. Does anyone have any insight into what ...

javascripthtmlcssweb

Activate a specific component of hover effect within multiple components generated by the `v-for` loop

Hey there! I'm currently facing a CSS challenge related to Vue. Let's say I want to display multiple components using v-for, and I want to add a hover effect to each component individually. The goal is to have the hover effect only apply to the c ...

cssvue.js

Learn how to implement a captivating animation with JavaScript by utilizing the powerful Raphael Library. Unleash the animation by triggering it with either

My desire is to indicate this movement by triggering a mouse click or drag to the desired location. let myDrawing = Raphael(10,10,400,400); let myCircle = myDrawing.circle(200,200,15); myCircle.attr({fill:'blue', stroke:'red'}); let my ...

javascriptraphael