dblclick() method in jQuery-CodePudding

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

CodePudding user response：

I just inspected your project and found 2 problems.

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.
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 :)

CodePudding user response：

change css display to block

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