The Toggle Functionality necessitates a double-click action

I'm currently working on implementing a menu that appears when scrolling. The menu consists of two <li> elements and has toggle functionality. Everything is functioning properly, except for the fact that the toggle requires two taps to activate on touch devices. I've attempted to add return false; or e.preventDefault();, but it hasn't resolved the issue. Can anyone provide assistance? Below is my JS Code:

  function toggle_visibility(id) {
    var e = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');
    
    [].forEach.call(allDivs, function(div) { 
        
        if (div != e){
            div.style.display = 'none';              
        }
        else {
            e.style.display = e.style.display == 'none' ? 'block' : 'none';
        }
    });    
}
.menubar {
  position: fixed;
  top: 0px;
  height: 51px;
  width: 295px;
  z-index: 69;
  background-color: #FFF;
  margin-top: -100px;
  -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
}
a.sub-categories-sticky-menu {
    color: #323470 !important;
    font-size: 14px !important;
}

ul.show-all-mattresses-sticky-menu {
    width: 7% !important;
    margin-right: 0px !important;
    margin-left: -8% !important;
}


#wrapper {
  width: 294px;
  min-height: 600px;
  margin: 0 auto;
}

nav {
  position: relative;
  width: 294px;
  height: 51px;
  margin: 0 auto;
  background: #323470;
}

nav { 
  display: block;
}

nav ul#menu {
  display: block;
  margin: 0;
  padding: 0;
  list-style: 0;
} 

nav ul#menu li {
  position: relative;
  display: inline-block;
}

nav ul#menu li a {
    display: block;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    color: #fff;
    text-decoration: none;
    padding: 0px 22px;
}

nav ul#menu li a:hover, nav ul#menu li:hover > a {
  background: #323470;
}

nav ul#menu li:hover > #mega {
  display: block;
}
nav ul#menu li:hover > #mega2 {
  display: block;
}

#mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 920px;
  height: auto;
  padding: 5px 0px 0px 20px;
  background: #dad7d6;
  display: none;
}
#mega2 {
  position: absolute;
  top: 100%;
  left: 0;
  width: 920px;
  height: auto;
  padding: 5px 0px 0px 20px;
  background: #dad7d6;
  display: none;
}

ul#menu ul {
  float: left;
  width: 23%;
  margin: 0 2% 15px 0;
  padding: 0;
  list-style: none;
}

ul#menu ul li {
  display: block;
}

ul#menu ul li a {
  float: left;
  display: block;
  width: 100%;
  height: auto;
  line-height: 1.3em;
  color: #828180;
  text-decoration: none;
  padding: 6px 0;
}

/*ul#menu ul li:first-child a {
  font-size: 1.2em;
  color: #828180;
}*/
ul#menu ul li:first-child a {
    font-size: 16px;
    color: #4a4949;
    font-weight: bold;
    font: 16px/1.2 'FuturaBT-Book', Arial, Helvetica, sans-serif;
    /* border-bottom: 1px #4a4949 solid; */
}

ul#menu ul li a:hover {
  color: #828180;
  background: none;
}

ul#menu ul li:first-child a:hover {
  color: #828180;
}

/* clearfix */
nav ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

nav ul {
  display: inline-block;
} 

html[xmlns] nav ul {
  display: block;
}
 
* html nav ul {
  height: 1%;
}

#content {
  padding: 30px 0;
}
<div class="menubar" data-scroll="true" style="margin-top: -151px;"><!-- begin wrapper -->
<div id="wrapper2"><!-- begin nav -->
<nav>
<ul id="menu">
<li><a href="javascript:void(0);" onclick="toggle_visibility('mega'); " style="background-color: #25BEBE;">Item 1</a>
<div id="mega">
<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="#">Show all</a></li>
</ul>
</div>
</li>
<li><a href="javascript:void(0);" onclick="toggle_visibility('mega2');">Item 2</a>
<div id="mega2">
<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul>
<li><a href="javascript:void(0);">Type</a></li>
<li><a class="sub-categories-sticky-menu" href="#">1</a></li>
<li><a class="sub-categories-sticky-menu" href="#">2</a></li>
<li><a class="sub-categories-sticky-menu" href="#">3</a></li>
<li><a class="sub-categories-sticky-menu" href="#">4</a></li>
<li><a class="sub-categories-sticky-menu" href="#">5</a></li>
<li><a class="sub-categories-sticky-menu" href="#">6</a></li>
</ul>

<ul class="show-all-sticky-menu">
<li><a href="#">Show all</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!-- /nav --></div>
<!-- /wrapper --></div>

javascripthtmlcss

Answer №1

Upon page load, the style attribute may come back as an empty string. To resolve this issue, consider implementing the code snippet below:

function toggle_visibility(id) {
    var element = document.getElementById(id);   
    var allDivs = document.querySelectorAll('div[id^=mega]');

    [].forEach.call(allDivs, function(div) { 

        if (div !== element)
        {
            div.style.display = 'none';

        } else {
            element.style.display = (element.style.display == 'none' || element.style.display === '') ? 'block' : 'none';
              }
    });

}

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

Utilizing JFlex for efficient brace matching

Currently, I am in the process of developing an IntelliJ plugin. One of the key features that I am working on is a brace matcher. After completing the JetBrains plugin tutorial, I was able to get the brace matcher functioning using this regular expression ...

javascriptintellij-ideaintellij-pluginjflex

Combinations of Typescript dependent unions

I'm struggling with calling the given union that wraps a function and its argument. Is there a way to call it without having to cast? type Wrapper = { fn: (a: string) => void arg: string } | { fn: (a: number) => void arg: number } let f ...

javascripttypescript

Develop a new object using NodeJS within a module for a function

I am working with a file named item.js exports.itemParam = function(name, price, url, id){ this.name = name; this.price = price; this.id = id; this.url = url; }; In my www.js file, I have imported item.js like this: var item = require('../m ...

javascriptnode.js

What are the recommended guidelines for using TypeScript effectively?

When facing difficulties, I have an array with functions, such as: this._array = [handler, func, type] How should I declare this private property? 1. Array<any> 2. any[] 3. T[] 4. Array<T> What is the difference in these declarations? ...

javascripttypescript

SVG Height remains fixed despite aspect ratio adjustments

Using one SVG image in a div with a width of 50px results in a height of 150px in IE11. The correct dimensions should be 50px x 50px. The width is applied correctly, but the height is not. Any suggestions? .svg-cont{ width:50px } img{ max-width:100% ...

htmlcsssvg

Prevent the Rain from descending

Looking for a way to toggle a particle emitter on or off, I've encountered memory leaks with my Reactjs code that generates rain/snow particles using the canvas element. Despite attempts to stop the animation properly, it seems to be projecting a new ...

javascriptjqueryreactjscanvas

From AJAX response to React state attribute, store the JSON data

I have a component where I need to fetch freight values via ajax and store them in the state property of this class. import React, { Component } from 'react'; import Freight from './Freight'; import CreateFreightEntryModal from '. ...

javascriptjsonajaxreactjs

A proposal for implementing constructor parameter properties in ECMAScript

TypeScript provides a convenient syntax for constructor parameter properties, allowing you to write code like this: constructor(a, public b, private _c) {} This is essentially shorthand for the following code: constructor(a, b, _c) { this.b = b; thi ...

javascripttypescriptecmascript-next

Guide to conditionally adding a property to an object in JavaScript

After scouring both Stack Overflow and Google for a solution, I finally stumbled upon this brilliant idea: x = { y: (conditionY? 5 : undefined), z: (conditionZ? 5 : undefined), w: (conditionW? 5 : undefined), v: (conditionV? 5 : undefined), u ...

javascriptnode.jsexpress

An overflow occurs due to the grid column gap

After testing CSS display: grid, I noticed that the grid-column-gap: 10px; property is causing the parent container to break. This makes the green area in my code smaller than the grid area itself. It seems like box-sizing: border-box; doesn't have a ...

htmlcsscss-grid

Design a custom cover page before printing using the window.print() method

When it comes to printing, I have a header and footer displayed on each page. However, I want the first page to be clean with just a picture or title, without the header and footer that appear on subsequent pages. I've attempted to use CSS like this ...

htmlcss

Incorporating a recurring image beneath a navigation menu

I'm attempting to recreate a header that has a similar appearance to the following: https://i.stack.imgur.com/uVXs3.png However, I am facing challenges in generating the repeating diamond design beneath the black bar. The diamond pattern resembles t ...

htmlcss

What could be causing a CSS transition to fail when hovering over a different image source?

Looking to change the image source of an <a> tag when hovering over it, while also incorporating a transition effect. It seems that the transition effect is effective with the background-image property for a <div> tag, but not with the conten ...

htmlcss

Error message: The Javascript Electron app is unable to find the node-fetch module when

Below is the code snippet from my gate.html file: <html> <head> <meta http-equiv='Content-Security-Policy' content='default-src 'self'; https://example.com.tr/validkeys.txt'> <meta http-equiv=&ap ...

javascriptnode.jshttpselectronnode-modules

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

javascriptcssvue.jsquasar-framework

What is the best way to combine 2 javascript objects to create a JSON structure without any nested levels?

I am having an issue with my mock server setup. I am using npm faker to generate random data, and then trying to transfer that data to another JavaScript file. My goal is to have a JSON structure like the following: { 0: varOne: 'value' ...

javascriptjsonnpmecmascript-6mocking

What exactly does Container-Based Authorization entail?

Did you know that the "XMLHttpRequest" object includes a method called "open," which has the option to supply a username and password? These parameters can be used for requests that require container-based authentication. Here is the method signature: op ...

javascriptjqueryhttpauthenticationcontainers

Retrieve information from an ajax call within an Angular application

I need assistance with 2 requests I have. $.ajax({ type: "POST", url: "http://sandbox.gasvisor.com:9988/uaa/oauth/token", data: "grant_type=client_credentials", headers: { 'Content-Type': 'application/x-www-form-urlencoded&a ...

javascriptjqueryangularjsjsonajax

Verify the existence of the email address, and if it is valid, redirect the user to the dashboard page

Here is the code snippet from my dashboard's page.jsx 'use client' import { useSession } from 'next-auth/react' import { redirect } from 'next/navigation' import { getUserByEmail } from '@/utils/user' export d ...

javascriptreactjsnext.jsnext-auth

How to transfer data using props through the ":to" attribute of a router link in Vue.js

I am facing an issue with creating a router-link in Vue and passing a route name as a prop. What I am trying to achieve is the following: <template> <div> <router-link :to="myProps">Login</router-link> </div> </tem ...

javascriptvue.jsvue-routervue-props