Question 35955 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

dblclick() method in jQuery

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

Tags:

3

Answers


  1. 0

    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 🙂

    Login or Signup to reply.
  2. 0

    change css display to block

    $('#menu_link').dblclick(function(){
      $('#menu').css("display", "block");
    });
  })
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search