Click Event triggers automatically without any manual intervention

Question

Click Event triggers automatically without any manual intervention

I am currently facing an issue with the following code snippet

$(".menu").on('click', function(e) {
    e.preventDefault();
    $(this).addClass("open").children("div").slideDown(200);
});

$(document).on('click', ".menu.open", function(e) {
    e.preventDefault();
    $(this).removeClass("open").children("div").slideUp(200);
});

Whenever I click on the .menu element, the inner div slides down but immediately slides up again and the open class is removed. This happens upon a single click. How can I resolve this issue and make it function properly as a drop-down menu for small screens - opened by a click and closed by another click?

jquery css drop-down-menu menu submenu

Answer 1

Answer №1

You have made a change to the code snippet by adding the class open upon click and then immediately sliding down-

$(".menu").on('click',function(e){
    $(this).addClass("open").........slideDown(200);
});

This has resulted in the delegated callback being executed. To prevent this, it is suggested to add the class at the end of the animation and ensure that the open menu is not triggered again -

$(".menu").on('click',function(e){
    var tthis = this; //saving the instance for reference in the callback
    if ($(tthis).hasClass('open')){ //ignore if already open
         return;
    }
    $(tthis).children("div").slideDown(200, function(){
        $(tthis).addClass("open"); // add class after the animation
    });
});

$(document).on('click',".menu.open",function(e){
    var tthis = this; //saving the instance for reference in the callback
    $(tthis).children("div").slideUp(200, function(){
        $(tthis).removeClass("open"); // remove class after the animation
    });
});

Answer 2

You have made a change to the code snippet by adding the class open upon click and then immediately sliding down-

$(".menu").on('click',function(e){
    $(this).addClass("open").........slideDown(200);
});

This has resulted in the delegated callback being executed. To prevent this, it is suggested to add the class at the end of the animation and ensure that the open menu is not triggered again -

$(".menu").on('click',function(e){
    var tthis = this; //saving the instance for reference in the callback
    if ($(tthis).hasClass('open')){ //ignore if already open
         return;
    }
    $(tthis).children("div").slideDown(200, function(){
        $(tthis).addClass("open"); // add class after the animation
    });
});

$(document).on('click',".menu.open",function(e){
    var tthis = this; //saving the instance for reference in the callback
    $(tthis).children("div").slideUp(200, function(){
        $(tthis).removeClass("open"); // remove class after the animation
    });
});

Answer 3

Answer №2

insert

e.stopPropagation();

within each

Answer 4

insert

e.stopPropagation();

within each

Click Event triggers automatically without any manual intervention

Answer №1

Answer №2

Similar questions

Fixed position halting in a specific area

Having trouble retrieving the post ID in WordPress

Utilizing jQuery grep() to sort through a JSON array

What is the process for sending the selected checkbox text to an action result on a Razor page?

Issues arise when attempting to manipulate the DOM with ng-view in AngularJS

Trigger the "onChange" event when the input element is modified by JavaScript within a popup window

Is it possible to include multiple src URLs for the same image in an HTML document?

Shuffle contents of a Div randomly

Struggling to add custom styles to an Ionic radio button

Determine the width of the uploaded image upon completion of the upload process with the help of the

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

Interacting with a Bootstrap menu

Add a border to the progress bar that has no content

Using jQuery to animate two images simultaneously in opposite directions

Unveiling the Secrets of Unearthing Data from JSON

Arranging a list using Flexbox with equal spacing between elements in each row containing three items

Utilizing ajax/jquery for form verification in Joomla

I am having trouble assigning the correct z-index to either the id or class of the Facebook message icon, which is appearing behind the menu

Restart Variable Counter following a new AJAX call in JavaScript/jQuery

PHP results can be manipulated with jQuery and JavaScript