JQuery is failing to toggle suddenly

On a recent website project I was working on, I encountered an issue with the .toggle function for the menu. The functionality is not behaving as expected and seems to be stuck.

I created a fiddle of the complete menu here

jQuery(document).ready(function() {
jQuery('.menuD').click(function(e) {
    jQuery(this).toggleClass('active');
    jQuery('.mennu').toggleClass('active');

    e.preventDefault();
    });
});

(This is my first time using fiddle so I hope I've entered everything correctly, without including the "head" section.)

I am struggling to understand why the toggle function is not working properly, especially since I implemented a similar solution successfully on my own page last year. Since Javascript is not my strongest language, any assistance in identifying the problem would be greatly appreciated.

jqueryhtmlcsstoggle

Answer №1

There is a mistake in your code :

jQuery('.mennu').toggleClass('active');

The correct syntax should be

jQuery('.menu').toggleClass('active');

Answer №2

let timeoutMenu = null;
$('.trigger').on("click", function() {
    $('.dropdown').toggleClass('active');
});

$('.trigger').hover(function() {
    clearTimeout(timeoutMenu);
    $('.dropdown').toggleClass('active');
}, function() {
    setTimeout(function() {
      $('.dropdown').removeClass('active');
    }, 500);
});
.menu, .menu ul {
        list-style:none;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .menu a {
        float:left;
        text-decoration:none;
        color:#000;
    }
    .menu li:hover > a {
        color:#666;
    }
    .menu ul {
        opacity:0;
        visibility:hidden;
        position:absolute;
        top:25px;
        z-index:1;
        background:#666;
    }
    .menu li:hover > ul {
        opacity:1;
        visibility:visible;
    }
    .menu ul a {
        padding:5px;
        display:block;
        text-transform:none;
    }
    .menu ul a:hover {
        background-color:lightgray;
    }
.trigger:hover .dropdown,
.trigger.clicked .dropdown {
   display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<ul class="menu">
    <li> <a class="trigger">MENU</a>

        <ul class="dropdown">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
            <li><a href="#">Item 4</a></li>
            <li><a href="#">Item 5</a></li>
        </ul>
    </li>
</ul>

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

Is there a way to ensure that the size of the second div box can adjust dynamically in CSS?

Is there a way to make multiple boxes expand dynamically in size when one of them contains more words? Currently, the problem is that only the box with more text expands while the others remain unchanged. I want all the boxes to follow the same size dynami ...

css

Troubleshooting z-index conflict when using :before pseudo element to emphasize list entries

I am experiencing an issue with highlighting items in a list generated by JSTree using the :before pseudo element. The z-indexes seem to be causing some trouble, as adjusting them results in the highlighting appearing either behind all links or in front of ...

csscss-selectorsz-indexjstree

Issue with navbar overlay: when screen width is minimized, components do not remain in one row

I'm encountering an issue with my navigation bar. I need it to maintain its size when the page is minimized, but currently, the navbar elements stack on top of each other as I reduce the browser window width. Before reducing browser window width: htt ...

javascripthtmlcssruby-on-railstwitter-bootstrap

Is it possible to add a gap between shadowed div elements?

I am attempting to create 3 divs in a single row. Each div is divided into two parts, one with an image and the other with three lines of text. The divs have a box-shadow style applied to them. However, I am facing issues with spacing between the divs. W ...

htmlcssbootstrap-4

Detecting Browser Version Using XML and Javascript

Recently, I created an XML file and attempted to access it using my web browser. It worked perfectly fine in Internet Explorer, but when I tried opening it in other browsers, it failed to function properly. After some investigation, I discovered that the i ...

javascripthtmlxmlcross-browser

Can additional classes/styles be added to a CSS3 background?

Today I discovered that CSS3 has the capability to support multiple backgrounds, which is truly amazing. What I would love is the option to combine multiple backgrounds dynamically, like this: .Watermarked{ background: url('text/logo.png') bot ...

cssbackground

Issue with jQuery functionality when page is loaded through AJAX request

My index page currently has jQuery and a js file for a slider plugin loaded. I am using an on click event to load an external page using .load. Here is the code snippet: //jQuery loaded from Google CDN here (in head) jQuery( document ).ready(function() { ...

javascriptjqueryhtmlajax

Troubleshooting issues with cloning a row using jquery

I'm having trouble figuring out why my code isn't working. I want to duplicate a div and add it to the beginning of its parent div. Here's the code I have so far: //Adding a new row function addRow(btn) { var CopiedRow = $(this).closest( ...

jqueryhtmlprepend

Optimal method for showcasing a logo bigger than the navigation bar

Seeking Advice: I am trying to incorporate a 100px by 100px logo on the left side of my navigation bar, which is only 50px in height. What changes can I make to the HTML and CSS structure for this design? My current setup includes: <div id="h ...

htmlcsswebnavbargraphical-logo

Getting the value of a dynamic p tag in Angular 4: A step-by-step guide

I am currently utilizing angularjs for the development of my website. I need to retrieve the value of a dynamically generated p tag from an API. To achieve this, I have implemented jQuery in my .ts file with the code $('p.s').html();. However, I ...

javascriptjqueryangular

Is there a problem with MySQL random function causing an infinite-scroll issue?

Utilizing the jQuery infinite-scroll plugin on a masonry gallery has been an engaging experience. However, I've encountered a challenge where duplicate records are being loaded in Infinite Scroll when sorting by Random (ORDER BY rand()). For instance ...

jquerymysqljquery-masonryinfinite-scrollmasonry

The DOM element fails to load when utilizing the ng-view attribute

Recently, I have started working with AngularJS for my first web application and everything is running smoothly. However, I am now looking to integrate some charts using jQuery. The issue arises when trying to load a chart upon clicking on a menu item in ...

javascriptjqueryangularjs

Dragend event for images does not trigger in webkit when using TinyMCE

When using the TinyMCE editor, I tried binding the dragend event on images with the following code: _imagePlugin.editor.dom.bind(_imagePlugin.editor.dom.select('img'), 'dragend', function(){console.log('aaaa');}); Oddly enou ...

javascriptjquerywebkittinymce

Press on the button that is currently in your field of view

I have a web page with multiple buttons inside div elements. I am looking to automate the process of clicking the "Buy" button that is currently visible on the screen when the user presses the B key. $(document).keydown(function(e) { if (e.keyCode == ...

javascriptjquery

Select a div and eliminate a border side at random

Currently, I am attempting to randomly remove one side - a different side from multiple divs. Unfortunately, I am facing challenges in getting it to work as anticipated. As someone who is relatively new to Java, I lack the experience needed. Here is the c ...

jquery

Unlinking specific days and holidays on jQuery DatePicker: A step-by-step guide

After receiving some assistance, I was able to develop a script that disables certain days of the week in the jQuery DatePicker. Now, I would like to enhance it further by adding the option to disable specific time periods such as planned holidays (e.g., 1 ...

jqueryjquery-uijquery-ui-datepicker

The menu positioned beneath the logo is malfunctioning

Upon downloading a template from the internet, I created a menu at the top with the logo positioned below it. However, when scrolling down, the menu items were supposed to turn black with a white background, resembling this: https://i.sstatic.net/1HTLZ.jp ...

csshtmlnavigationbar

JavaScript does not function properly with dynamically loaded content

Trying to load the page content using the JQuery load() method. See below for the code snippet: $(window).ready(function() { $('#content').load('views/login.html'); }); .mdl-layout { align-items: center; justify-content: center ...

javascriptjqueryhtmlcssajax

Understanding HTML through regular expressions

Can anyone assist me in finding the regular expressions needed to parse an HTML file for a program I'm working on? Here are some specific ones I'm looking for: <div> <div class=”menuItem”> <span> class=”emph” Any str ...

htmlregexparsing

There appears to be a gap on the right side of the <span> element, resembling an additional space at the end

While testing a button on my website, I noticed that all the spans have an extra space at the end. Adding a background box made this gap very noticeable. Upon further inspection of my other pages, I realized that the issue exists there too. I have not made ...

htmlcssformatting