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

Python web application encountering issues running in browser

After successfully creating a Python desktop application with Tkinter library, we decided to convert it into a web app using pyjamas. The conversion process generated html files and javascripts as expected. However, when attempting to open the html file i ...

javascriptpython-2.7web-applicationstkinterpyjamas

Attempting to display a singular form

Currently, I am working on a MERN app and encountering a small issue... I am developing an application where users can create rooms and within those rooms, they can plan their daily activities. It's similar to a TODO app but more intricate. I wanted ...

javascriptreactjslogic

Tips for iterating through a collection of arrays with jQuery

I am facing an issue with looping through an array of arrays and updating values or adding new keys to each array. Here is my current setup: var values = []; values['123'] = []; values['456'] = []; values['123&apo ...

javascriptjqueryarrays

Is there a way to extract a value from a string and store it as a variable in

Creating a functionality to resize images from WordPress. The goal is to extract the width and height values from a string similar to this: <img src="/path/img.jpg" width="600" height="400" /> Next step is to remove the specific values (600 and 40 ...

phphtmlvariablessearch

Tips for troubleshooting JavaScript errors in Internet Explorer 7 & 6 using Dreamweaver CS3

Is there a way to track and debug JavaScript errors in Internet Explorer 7 & 6 on web pages using Dreamweaver CS3? I am experienced with debugging in Visual Studio, but unsure how to do it in Dreamweaver CS3. ...

javascriptdreamweaver

Auth0 encountering issues retrieving ID token and user metadata

Currently in the process of integrating Auth0 into a Vue.js/Node.js application, I have successfully enabled user registration and login functionality (to /callback). Although the manual addition of data to the user metadata section is functional at this s ...

javascriptvue.jsauth0

Adjust the background color of the date and time selection tool

Trying to customize the background of a datetime picker created using jquery.pttimeselect.js. Despite linking the correct css file (jquery.pttimeselect.css), I am unable to change the background color. Any suggestions on how to successfully modify the ba ...

jquerycssdatetimepicker

Invoke ajax to reset session once user navigates away from page

I am looking for a solution to automatically clear the PHP session array every time a user exits my webpage. However, I need to exclude cases where the user clicks on links with query strings. I attempted using Javascript code, but it did not work as expec ...

phpjavascriptjqueryajaxregex

Opposite of CSS Media Query in a precise manner

Can you provide the opposite of this specific CSS media query? @media only screen and (device-width:768px) To clarify, what we are looking for is everything except iPad or not iPad. Just an FYI, I have attempted the code below without success: @media n ...

htmlcssw3cmedia-queries

Equivalent of SQL Select in MongoDB with node.js

As a newcomer to node.js and mongodb, I find it frustrating that querying data with 'SELECT * FROM table' in php produces an array or array of objects, while in node and mongo, it requires so much unnecessary code. To simplify this process, I cre ...

javascriptnode.jsmongodb

Attempting to find a solution to successfully transfer an object from the jEditable datatable plugin to my Java Servlet

Currently, I have a Datatable set up and I am utilizing the jeditable plugin to make cells editable and update data. However, after editing a cell and hitting enter, when the data is sent back to my URL Rest endpoint (where I simply have a System.out.print ...

javajavascriptpostdatatablesjeditable

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

I am managing a platform where users have the ability to share text-based posts, and other users can engage with those posts through comments. An issue I have encountered is that once more than two comments are posted on a parent post, they start to overfl ...

htmlcss

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It

//C.php <script type="text/javascript"> $(document).ready(function(e) { $('div').load("D.php"); }); </script> <div></div> //D.php <script type="text/javascript" src="D.js"></script> //D.js console.log(45 ...

javascriptjqueryajax

Error in Express.js application: form fields lose their values

I am currently developing a blogging application using Express, EJS and MongoDB. One of the main features is an "Add New Post" form with an addPost() method in the controller; exports.addPost = (req, res, next) => { const errors = validationResult ...

javascriptexpressejsmean-stack

What is the reason behind the default disabling of bootstrap multiselect options?

Just diving into the world of bootstrap and I'm puzzled as to why my simple multiselect options aren't responding when clicked. UPDATE The first multiselect option on the test-site linked below is the one giving me trouble. I've tried it o ...

javascriptjqueryangularjshtmltwitter-bootstrap

Comparing OLOO and OO in ReactJS for front-end web development

After reading Kyle's book, I found it to be extremely informative. However, I am a bit perplexed by the discussion in "You Don't Know JS: this & Object Prototypes". The series argues that the "Object Linking to Other Object" design pattern is cl ...

javascriptreactjsdesign-patterns

Error 410: The Webpage has Disappeared

Unfortunately, my website fell victim to a hacking attack that resulted in the addition of numerous unwanted pages. These pages were quickly indexed by Google, causing a significant drop in traffic. The names of these pages all follow a similar pattern, s ...

html.htaccesshttp-redirect

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

Issue encountered when setting up Webpack development server resulted in the failure to generate

Is anyone else experiencing difficulties when trying to create a static folder named "dist"? Package.json "scripts": { "start": "webpack-dev-server --open", "dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/fr ...

javascriptreactjswebpackreact-reduxwebpack-dev-server

Instruction failed to produce HTML output

Currently facing a challenge with my code - I have a dynamically created span (via ng-repeat). <span my-size id="abc"></span> <span my-size id="def"></span> <span my-size id="ghi"></span> The goal is to extract the id ...

javascriptjqueryangularjs