dblclick() method in jQuery

Question

I am writing a jQuery dblclick() method. I am trying to show a hidden menu when double clicked on a button. I am creating a button named "Menu" in my html file with href attribute.

The href attribute in HTML file is this:

<a href="#" id="menu_link">Menu</a>
        <div id="menu" style="display: none;">
          <a href="https://www.youtube.com/">Youtube</a><br/>
          <a href="https://www.facebook.com/">Facebook</a><br/>
          <a href="https://www.apple.com/">Apple</a>
              
        </div>
        

So, when "Menu" is double clicked it show three options - youtube,facebook,apple

and then in js file, I am creating a dblclick() function and giving them id "menu_link" and then using show() to display the hidden menu.

This is what I have in js file:

$('#menu_link').dblclick(function(){
      $('#menu').show();
    });

It doesn't work. When I doubleclick the "menu" option it doesn't show me anything.

In Html file :

<a href="#" id="menu_link">Menu</a>
        <div id="menu" style="display: none;">
          <a href="https://www.youtube.com/">Youtube</a><br/>
          <a href="https://www.facebook.com/">Facebook</a><br/>
          <a href="https://www.apple.com/">Apple</a>
              
        </div>
        

In js file :

$(function() {
$('#menu_link').dblclick(function(){
      $('#menu').show();
    });
  });

The link to the project - https://glitch.com/edit/#!/comp484-proj2-km

Answer 1

Maybe you try like this:

add in js-File:

function openMenu(){
    $("#menu").css("display", "block");
  }

change your div id=menu to:

<a id="menu_link" ondblclick='openMenu()'>Menu</a>
    <div id="menu" style="display: none;">
              <a href="https://www.youtube.com/">Youtube</a><br/>
              <a href="https://www.facebook.com/">Facebook</a><br/>
              <a href="https://www.apple.com/">Apple</a>
                  
            </div>


    

I've tried it at glitch and it worked.

Answer 2

I just inspected your project and found 2 problems.

1. You'll need to fix checkAndUpdatePetInfoInHtml(); According to my inspections, this function is causing some problems and not letting the program finish. Therefore the double-click check won't be called.

2. In the A tag, the href is just refreshing the page. Removing the menu. Just remove the href.

Before

<a href="#" id="menu_link">Menu</a>

After

<a id="menu_link">Menu</a>

Hope this helps :)

Answer 3

change css display to block

$('#menu_link').dblclick(function(){
      $('#menu').css("display", "block");
    });
  })