Solving the Issue of Double-Click Links on Mobile Devices

Currently, I am in the process of setting up an onclick dropdown navigation bar for the mobile version of my website. However, I am facing an issue where it requires a double click in order for the dropdown to activate. What I actually want is for it to drop down with just one click.

So far, the only solution I have attempted is using a JavaScript function that I will include in my code snippet below.

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
    }

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}
.main-nav {
  display: flex;
}

/* CSS code continues here */

After implementing this code, I expected the dropdown menu to respond to a single click. Unfortunately, the current behavior is such that it requires two clicks, which is not what I intended.

If anyone could provide assistance and help me achieve the desired functionality, it would be greatly appreciated. Thank you in advance.

javascripthtmlcss

Answer №1

One of the reasons why it doesn't show on the first click is because of this condition

if (x.style.display === "none")

This condition returns false since you have set display: none; in the CSS stylesheet. A quick solution to this issue would be adding display: none; inline:

<ul id="submenu1" style="display:none;">

A more organized approach would involve using classes to manage menu visibility. Refer to the code snippet below.

function myFunction() {
  var x = document.getElementById("submenu1");
  x.classList.toggle('hidden');
}
.main-nav {
  display: flex;
}

.main-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  list-style: none;
}

.main-nav li {
  text-align: center;
  position: relative;
  width: 100%;
  border-bottom: 1px solid white;
}

#submenu1 .submenu1-li:first-of-type {
  border-top: 1px solid white;
}

.main-nav a {
  display: flex;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: #fff;
  background-color: #000;
  padding: 5% 0%;
}

.submenu1-li {
  position: absolute;
  top: 0px;
}

#submenu1 {
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu1.hidden {
  display: none;
}

.submenu2-li {
  position: absolute;
  top: 0px;
}

#submenu2 {
  display: none;
  flex-direction: column;
  position: absolute;
  width: 100%;
}

#submenu2 .submenu2-li:first-of-type {
  border-top: 1px solid white;
}

#active {
  background-color: #ffffff;
  color: #000000;
  height: 100%;
}

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}
<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>
            <ul id="submenu1" class="hidden">
              <li class="submenu1-li">
                <a id="active" href="home.html">Home</a>
              </li>
              <li class="submenu1-li">
                <a href="about.html">About</a>
              </li>
              <li id="desktop-contact-move" class="submenu1-li" >
                <a href="contact.html">Contact</a>
              </li>
              <li id="desktop-port-move" class="submenu1-li" style:"order: 1;">
                <a href="javascript:void(0)" onclick="myFunction_2();">Portfolio
                  <span class="arrow">&#x25BC;</span>
                </a>
                <ul id="submenu2">
                  <li class="submenu2-li">
                    <a href="designs.html">Designs</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="websites.html">Websites</a>
                  </li>
                  <li class="submenu2-li">
                    <a href="photography.html">Photography</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </nav>

Answer №2

Here's an issue - the x.style.display returns a blank string because that property is defined in the stylesheet.

The first solution is to use inline CSS.

The second solution is to apply another check for a blank string like this:

function myFunction() {
  var x = document.getElementById("submenu1");
  if (x.style.display === "none" || x.style.display === "") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

function myFunction_2() {
  var y = document.getElementById("submenu2");
  if (y.style.display === "none" || y.style.display === "") {
    y.style.display = "block";
  } else {
    y.style.display = "none";
  }
}
.main-nav {
  display: flex;
}

/* More CSS code here */

#submenu1 a:hover {
  color: black;
  background-color: white;
}
 #desktop-port-move:hover #submenu2 {
  display: block;
}
<nav class="main-nav">
      <ul>
        <li>
          <a id="hide" href="javascript:void(0)" onclick="myFunction()">Menu
            <span class="arrow">&#x25BC;</span>
          </a>

          /* More HTML code here */

        </ul>
      </nav>

Explore more about this issue at: Fixing the Mobile Double-Click Link Issue

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

How can I ensure that the size of the Dropdown Menu Item matches its parent in both Bootstrap and CSS styles?

I am working on a navigation bar that has a dropdown menu which appears on hover. I want the size of the dropdown menu items to match the size of the parent element. Here is an image for reference: https://i.stack.imgur.com/oNGmZ.png Currently, the "One ...

javascriptjqueryhtmlcsstwitter-bootstrap

Customizing the Twitter bootstrap navigation in Wordpress

I've been working on theming my navigation menu using Twitter Bootstrap. I want it to resemble the demo example of a fixed top banner, which can be seen here: http://getbootstrap.com/examples/navbar-fixed-top/ Although I have managed to get it to wor ...

phpjquerycsswordpresstwitter-bootstrap

What could be the reason that io.emit() isn't functioning within process.on()?

Currently, I am attempting to implement this solution in order to notify clients when my server is being closed. However, I am encountering an issue where the server does not emit the expected message. It appears that the program is terminating before the ...

javascriptnode.jsexpresssocket.io

Can Javascript be used to alter a URL?

Traditionally, .htaccess is responsible for this task but unfortunately, I do not have the capability to access file directories (since I am using Blogger) My goal is to carry out a redirection "mysite.com/a/..." to "mysite.com/b/..." ...

javascripthtmlurl

What are the steps to transform an HTML select element into a sub-menu user interface?

Can the native HTML element select be used to add submenus? Processes lack of process failure to follow process HTML <!DOCTYPE html> <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo"&g ...

javascripthtmlcss

Implementing AngularJS with the use of the "bind(this)"

Lately, I have made the switch to using "this" in the controllers and controllerAs in ngRoute and Directives instead of accessing $scope directly. While I do appreciate the aesthetic appeal of the code, I find myself needing to manually bind "this" to each ...

javascripthtmlangularjs

Strip with a z-index positioned within the wrapper, appearing prominently across the entire page

I'm trying to achieve the effect of the blue strip shown in the image below. It's inside the wrapper so the HTML code looks like this: <body> <div class="wrapper"> <div class="strap"></div> </div> </body> ...

htmlcss

The HTML5 Cache Manifest is attempting to cache a resource that has not been defined in the manifest

Currently, I am developing an application that requires caching certain requests. I have been experimenting with HTML5 cache and here is my manifest file: CACHE MANIFEST # 2d25a26de3a1148a2fa5e534325f84cca2184090174c6ba451451c54f71f52d6 assets/applicatio ...

ruby-on-railshtmllocal-storagehtml5-appcache

Avoid Bootstrap 5 collapse when clicking on links or buttons

In my table, there are parent rows with hidden child rows that can be toggled using the bootstrap collapse feature. Clicking on a parent row toggles the visibility of its child rows. Both parent and child rows can be dynamically added to the table. Parent ...

javascriptbootstrap-5

AngularJS $compile function is failing to render a custom template

Hi there, I am facing an issue while trying to render a custom template using the $compile function. The error message I keep getting is: unrecognized expression: {{senddata}} I have provided my code below for reference: app.controller('MainCtrl&ap ...

javascripthtmlangularjs

Components loading in Angular result in lat long being undefined in google map integration

I am currently utilizing Ionic-angular AGM. I am facing an issue where I am unable to retrieve my current location when the component loads, as it seems like the component is being fired before the latitude and longitude are ready. How can I make this proc ...

javascriptangularionic-framework

Error! D3.js is throwing an Uncaught TypeError because it cannot find the function .enter(...).append(...).merge

Currently, I am facing an issue while attempting to construct a table with multiple nested dropdowns using d3.js. The problem arises when switching from a newer version of d3 where my code functions flawlessly to d3.js v3. Upon replacing the newer version ...

javascripthtmld3.jshtml-tabledata-visualization

Animate the coloring process with dynamic motion

Is there a way to dynamically fill a canvas with color and apply animation? I have successfully created a canvas cylinder that fills with color, but I'm hoping for a slow animation effect when the color is filled. I've tried searching on Google ...

jquerycsshtmlcanvashtml5-canvas

Switch a class back and forth between two elements

Here is the HTML code: <div class="container"> <div id="element-1" class="element-show"></div> <div id="element-2"></div> </div> I am trying to toggle the class element-show between element-1 and element-2 using ...

javascriptjqueryhtml

Implement an AJAX call to update the database using PHP

My bootstrap button is set up like this: <button type="button" id="turnOff" class="btn">Turn Off</button> When clicked, it triggers an ajax function in "bootstrap.min.js". Here is the ajax function in action: $('#turnOff').click(f ...

javascriptphpjqueryajaxtwitter-bootstrap

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...

phphtmlarrayscodeigniter

Set a child element's height based on its parent row-fluid using Twitter Bootstrap CSS

Can you suggest a more effective approach to set the height of a child element equal to its parent's height? I have attempted the following method without success: .child { background: none repeat scroll 0 0 #5B6567; border-radius: 5px 0 0 ...

csstwitter-bootstrapheightparent

Alter the color of a link upon clicking with Jquery

I have written this code in HTML/CSS and jQuery: $('.myFilters li').click(function() { $(".category").hide(); var v = $(this).text()[0]; $('.title li').hide().filter(function() { return $(this).text().toUpperCase() ...

javascriptjqueryhtmlcss

What is the best way to implement this table design using proper markup?

In order to maintain the tables while using CSS for proper positioning with a strict doctype, I have come up with a design that perfectly meets my needs. Take note of the <br> tags in the last (bottom) <td> cell. Despite the growth in this are ...

htmlcss

Having difficulty triggering the onchange event for a combo box programmatically in IE using JavaScript

I need to dynamically trigger the onchange function when the user changes the value of another combo box. Here's my code: HTML <select name="vbitratecontrol0" id="combo1" onchange="set()"> <option value="0">None</option> ...

javascripthtmlonchange