P.Davide P.Davide - 2 months ago 4
jQuery Question

jquery onclick dropdown menu

Using Google I found this code here on stackoverflow. I use it to show a dropdown menu when the user click on its parent element and the dropdown menu disappears when the user click again on the parent element. I need to add two "features" but I don't know how.. Here is the code:

<script>
$(document).ready(function() {
$('.parent').click(function() {
$('.sub-nav').toggleClass('visible');
});
});
</script>

<script>
$(document).ready(function() {
$('.parent2').click(function() {
$('.sub-nav2').toggleClass('visible');
});
});
</script>


<script>
$(document).ready(function() {
$('.parent3').click(function() {
$('.sub-nav3').toggleClass('visible');
});
});
</script>

<script>
$(document).ready(function() {
$('.parent4').click(function() {
$('.sub-nav4').toggleClass('visible');
});
});
</script>

<script>
$(document).ready(function() {
$('.parent5').click(function() {
$('.sub-nav5').toggleClass('visible');
});
});
</script>


Here there is the html:

<li class="parent">chi siamo
<ul class="sub-nav">
<li><a href="http://www.sanremoset.it/chi_siamo/carla_evangelista.html">Dott.ssa Carla Evangelista</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/fulvio_torello.html">Dott. Fulvio Torello</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/mauro_evangelista.html">Dott. Mauro Evangelista</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/claudio_lanteri.html">Dott. Claudio Lanteri</a></li>
<li><a href="http://www.sanremoset.it/chi_siamo/francine_bontemps.html">Dott.ssa Francine Bontemps</a></li>
</ul>
</li>

<li class="parent2">prevenzione
<ul class="sub-nav2">
<li><a href="http://www.sanremoset.it/prevenzione/richiami_periodici.html">Richiami periodici</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/igiene_orale.html">Igiene orale</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/desensibilizzazioni.html">Desensibilizzazioni</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/fluoro.html">Fluoro</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/tests_salivari.html">Tests salivari</a></li>
<li><a href="http://www.sanremoset.it/prevenzione/prevenzione_tumori.html">Prevenzioni tumori</a></li>
</ul>
</li>


Here the Css code for the sub-nav li element. The parent class has no css I use it only to fire the jquery code:

#menu .sub-nav li{
float: left;
width: 165px;
list-style: none;
text-align: left;
font-size: 14px;
font-family: "Helvetica Neue";
border-left: 1px solid;
border-right: 1px solid;
background-color: #e8e8e8;
margin-top: 0px;
}


The first thing is that I want the menu to hide when the user click on another link or outside the dropdownmenu.

The second thing is that I want the pointer to become a hand when the user go hover the
<li>
with the parent class.

How to add these two features?

Edit: ok forget about the second thing, I just discovered how to add this, simply using the following piece of css code:

li { cursor: pointer; }


I found this code and it works but only the first time.. :

<script>
$(document).click(function(e){
var targetbox = $('.parent');
if(!targetbox.is(e.target) && targetbox.has(e.target).length === 0){
$('.sub-nav').css("visibility", "hidden");
}
});
</script>

Answer

The trick can be as simple as adding an invisible "button" hat covers the whole screen, so when the menu is open, you can click outside of the menu area and the menu will be closed.

A demo can be found on my codepen:

/* this #menu-overlay element will cover the screen when the menu is open. Clicking on it will close the menu. */
#menu-overlay {
  display: none;
  position: fixed;
  background: purple; /* I made this purple so you can see it :) */
  opacity: 0.1; /* can be made to 0 */
  width: 100%;
  height: 100%;
  z-index: 0;
  top: 0;
  left: 0;
}

http://codepen.io/Himechi90/pen/YyQrPr

Also, you dont have to write so many jquery triggers. If you name all your sub-nav classes as "sub-nav", you can target it like below:

$('.parent').on("click",function(){
    // "this" in $(this) --> means the current clicked element
    // .find() will search the CHILDREN of the clicked element with the class "sub-nav"
    $(this).find(".sub-nav").toggle();
  });

Good luck! :)

Comments