`The toggleClass function will only respond to the first click in Internet Explorer and Firefox browsers

This is my first time asking for help as I usually find the answers myself, but this issue has me stumped.

Here's what I have:

HTML

<!-- This div opens/shows the navigation. I need to change the div to a button tag -->
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div>
<nav id="navigation" class="navigation">
    <!-- This button closes/hides the navigation --> 
    <button type="button" value="Close" class="button-close">
        <a id="menu-close" class="menu-close">X</a>
    </button>
    <h1>User Name</h1>
    <p class="mail"><sec:authentication property="principal.username" /></p>
</nav>

CSS

.navigation {
    position: fixed;
    background: #fff;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: -100;
    display: none;
    text-align: center;
    font-weight: bold;
}

.navigation-open {
    z-index: 100;
    display: inherit;
}

jQuery

$(document).ready(function(){

    $(".menu-open").click(function(){
       $(".navigation").toggleClass("navigation-open")                  
    });
    $(".menu-close").click(function(){
       $(".navigation").toggleClass("navigation-open")
    });
});

Clicking on the menu-open link toggles the visibility of the navigation element, however, clicking on the menu-close link does not toggle it back off immediately after in IE and FF browsers, unlike in Chrome.

I am using Chrome 52, IE 11, and FF 46.

What I've tried so far:

  • Switching from jQuery version 1.x to 3.x
  • Using e.stopPropagation() function and redirecting the handling to html

Any help on resolving this issue would be greatly appreciated!

Thank you in advance!

jqueryhtmlcss

Answer №1

It is not recommended to have an anchor element inside a button element.

Take a look at the following code snippet:

$(document).ready(function(){

    $(".menu-open").click(function(){
       $(".navigation").toggleClass("navigation-open")                  
    });
    $(".menu-close").click(function(){
       $(".navigation").toggleClass("navigation-open")
    });
});
.navigation {
        position: fixed;
        background: #fff;
        width: 100%;
        height: 100vh;
        top: 0;
        z-index: -100;
        display: none;
        text-align: center;
        font-weight: bold;
}

.navigation-open {
        z-index: 100;
        display: inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This one opens/shows the nav. I should change div to a button tag -->
<div class="menu"><a id="menu-open" class="menu-open" href="#">&#9776;</a></div>
<nav id="navigation" class="navigation">
    <!-- This on closes/hide the nav --> 
    <button type="button" value="Close" class="button-close menu-close">
        X
    </button>
    <h1>User Name</h1>
    <p class="mail"><sec:authentication property="principal.username" /></p>
</nav>

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

Repositioning divs using HTML, CSS, and PHP

My divs are moving around when I resize the window. Can someone assist with this issue? I have HTML/PHP code for login and page retrieval. This is my HTML body section with PHP for logging in and managing the webpage content. <div class="menu"> ...

phphtmlcss

Exploring the wilderness: Safari with a twist of negative margin

Dealing with two values, "price" and "old price". When displaying the "old price", I need to cross it out with a line that is thinner than the default text-decoration: line-through. Below is the code snippet: HTML: <span class="price"> <span c ...

htmlcsssafarimargintext-decorations

Comparing Jscript's impact on CSS classes to the power of Json

On my HTML page, there is a div that looks like this: <div class="circle active" id="prg_inizio"> bla bla bla </div> After making an Ajax call, I receive a JSON result and need to update the class name from "circle active" to "circle done." ...

javascriptjqueryjsongetelementbyid

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perhaps this information will come in handy for someone. I am working with a Vue template that contains HTML. <template slot="HEAD_Status" slot-scope="data"> <!-- some html without using of data --> </template> Eslint is showing [v ...

htmlvue.jseslint

Having trouble switching tabs on Bootstrap 4.3 beyond the first tab?

I have integrated bootstrap tabs into my web app by following the documentation provided on the bootstrap website. While I have successfully achieved the fade animation for the first tab, I am facing issues with getting the other two tabs to function prop ...

htmlasp.netbootstrap-4

assigning a variable using jQuery

<script> function update(elem) { var ele=$(elem).siblings('label#test').html(); var a=document.getElementById('test'); var htm = '<input type="text" name="modal" id="modal" style="width:70%;" value="'+$(elem).siblings ...

javascriptjqueryjquery-selectorsjquery-validate

If the div is devoid of content, then remove the class

<div class="slider">content goes here</div> <div id="slider-2" class="active inactive">also some content here</div> <script type="text/javascript"> function checkEmpty( element ){ return !$.trim(element.html()) ...

javascriptjqueryhtmlcss

Width of the `div` element is expanding

I'm encountering an issue where a div container is automatically stretching to the full width of the page, instead of adjusting to fit the content within it. Below is the HTML code snippet: <!doctype html> <html> <!-- Head --> <h ...

htmlcss

Deleting a script from a database using jQuery AJAX

I'm attempting to remove files from my database via an AJAX call, however, I seem to be missing a step. Instead of displaying "del id", I only see * del".$row1['id']." *. Can anyone assist me with this issue? // Here is the main file // &l ...

phpjqueryajax

What is the best way to generate a JavaScript variable using information from SQLite?

I found the examples provided in the JavaScript edition of the Missing Manual series to be extremely helpful! OG.Q. I have explored various options but have not been able to find a solution to my problem yet. This is what I am trying to achieve: Save u ...

javascriptjqueryajaxsqlitevar

It is not possible for me to modify the attributes in responsive mode without first generating a new class within the tag

In order to make the attribute work in a responsive manner, I believe I need to create a class within the h2 tag. However, I am unsure where the issue lies. Could it possibly be related to the browser? Check out the image below for reference: this is my p ...

htmlcss

Reproducing contents from an HTML div

I am facing a challenge with two <div> elements that share the same structure, but differ in their id and name. My goal is to transfer the values from one div to the other while preserving attributes and copying only the value attributes. This was m ...

javascriptjqueryhtml

What is the best way to submit a form using AJAX and ensure that the form values are encoded in

After a successful transaction, I need to send the data to PayPal. I am aware that using $.post('https://www.paypal.com/cgi-bin/webscr', data); is not the correct approach because I want it to be submitted as if it were coming from a form action, ...

phpjqueryajaxjson

Is it possible to place content at the bottom of a div using just a single div element?

Here is the css I am currently using: .stage{ width:960px; background-image:url('stage.png'); background-position:bottom; background-repeat:repeat-x; min-height:400px; float:left; text-align:center; } This code place ...

css

Exploring the importance of defining a JSONP callback function

I am relatively new to JavaScript and struggling with an issue in my code. My code includes an Ajax request to a server, and I receive a response from it. Due to the cross-domain nature of the request, I am utilizing JSONP. $.ajax({ url: "***", c ...

javascriptjqueryajax

Utilizing JQuery-UI for DateTimePicker Implementation in MVC Framework

Looking to add a datetimepicker in my MVC application, I came across some code that may be helpful from this source. First, I included the necessary JS and CSS files: <script src="~/Scripts/jquery-1.9.0.min.js"></script> <scrip ...

jqueryasp.net-mvcjquery-uiasp.net-mvc-5datetimepicker

A pair of div elements within one section

Can you explain why the following HTML code uses two divs, one with a class and the other with an ID, instead of just using one of them to assign properties? .header { background-image: url("https://s3.amazonaws.com/codecademy-content/courses/web-101/ ...

htmlcss

Order objects in an array based on various criteria using Javascript

In sorting an array of objects, I have two rules that need to be followed in priority: The numbers must be in numerical order The times must be in chronological order It is essential for the objects to be sorted not only by numbers but also by time. For ...

javascriptjqueryarrayssortingjavascript-objects

Animate div visibility with CSS transitions and Javascript

I'm currently working on incorporating an animation into a div that I am toggling between showing and hiding with a button click. While I have the desired animation, I am unsure of how to trigger it using JavaScript when the button is clicked. Can any ...

javascripthtmlcss

Leveraging the sibling combinator for altering the class of a sibling SVG element with the assistance of Material

I have created an SVG picture that I am trying to animate. Behind the elements I want to animate on mouse hover, I have added transparent rectangles. The hover effect works well on these elements as the cursor changes to pointer. However, when I attempt t ...

javascriptcssreactjssvgmaterial-ui