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");
});
})