jquery onclick dropdown menu

Question

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>

I feel like you left out the CSS we're supposed to be looking at, because I dumped your code into a CodePen link and nothing shows up. — mt_xing
– mt_xing, Commented Oct 8, 2015 at 22:12

Himechi90 · Accepted Answer · 2015-10-08 22:46:37Z

4

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

answered Oct 8, 2015 at 22:46

Himechi90

3482 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Himechi90 Over a year ago

Hi, glad it worked. Which link do you mean? I believe the links inside .sub-nav are clickable?

P.Davide Over a year ago

yep, when i click once the menu-overlay appears (pink overlay) but I am not able to click on other link of the menu (sub-nav)

Himechi90 Over a year ago

Can you try to check codepen.io/Himechi90/pen/YyQrPr again? It works for me :) If you mean that it doesnt work on your project, please check if you have the z-index setting correctly.

P.Davide Over a year ago

yes and the demo works so I am missing something.. I add the js code on my page and add this to my menu: <div id="menu-overlay"></div> Then I add this to css: #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; }

Himechi90 Over a year ago

I see. You need to add "position: relative; z-index: 5;" to your #menu element and it should work. If it does, please mark my answer as accepted answer ok? ;)

|

Ahmad Maleki · Accepted Answer · 2016-09-19 14:15:27Z

0

The javascript code needs to be shortened and you don't need to repeat $(document).ready for each click. Also the markup could be better, I suggest instead of <ul> as container for <li>, use <div> element.

This link on fiddle might be helpful, have a look on fiddle

http://www.jsfiddle.net/NFTFw/29/

edited Sep 19, 2016 at 14:15

Ahmad Maleki

1,5033 gold badges23 silver badges37 bronze badges

answered Oct 8, 2015 at 22:29

rafahell

3151 silver badge7 bronze badges

Collectives™ on Stack Overflow

jquery onclick dropdown menu

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related