Closing menu when I click outside of it using Jquery

Question

I am trying to apply the solution found below to my design but I just can't seem to get my menu to close. I am new to this coding thing so any help would be appreciated.

This is the fix I was trying to apply to my code:

Click outside menu to close in jquery

My code:

  <body>
    <div class="container">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li id="clickMe1"><a href="#s1">Menu 1</a>
                <span id="s1"></span>
                <ul class="subs subhide1">
                    <li><a href="#">Header a</a>
                        <ul>
                            <li><a href="http://www.yahoo.com" target="blank">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header b</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li id="clickMe2" ><a href="#s2">Menu 2</a>
                <span id="s2"></span>
                <ul class="subs subhide2">
                    <li ><a href="#">Header c</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header d</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li ><a href="#s3">Menu 3</a>
                <span id="s3"></span>
                <ul class="subs">
                    <li><a href="#">Header e</a>
                        <ul>
                            <li><a href="#">Subsdfa</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Header f</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>

                    <li><a href="#">Header g</a>
                        <ul>
                            <li><a href="#">Submenu x</a></li>
                            <li><a href="#">Submenu y</a></li>
                            <li><a href="#">Submenu z</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Menu 4</a></li>
          <!--  <li><a href="#">Menu 5</a></li>  reserved for possible use later--> 

        </ul>
    </div>

    <script type="text/javascript">


     $('#nav > li').click(function () {
     $(this).siblings().find('ul.subs').hide();
      $(this).find('ul.subs').toggle();
     });

     </script>

     <script type="text/javascript">

       $('html').click(function() {
    //Hide the menus if visible
    });

    $('.container').click(function(event){
    event.stopPropagation();
     });
     </script>


      </body>

If one or more of the answers below are helpful, would you kindly accept the best answer by clicking the checkmark to the left of it? This will also award you some reputation points. — m59, Jan 01 '14 at 01:23

score 0 · Answer 1 · answered Nov 25 '13 at 08:18

You need to use the .Ready() function, try the following

      <script type="text/javascript">
    $(document).ready(function(){
           $('html').click(function() {
        //Hide the menus if visible
        });

        $('.container').click(function(event){
        event.stopPropagation();
         });
});
         </script>

score 0 · Answer 2 · answered Nov 25 '13 at 08:36

You can adapt this to suit your specific needs. Live demo here (click).

$(document).click(function(e) {
  //if what is clicked isn't in the menu
  if (!$.contains($myMenu[0], e.target)) {
    $('ul li ul').hide(); //target the opened menus and hide them
  }
});

Closing menu when I click outside of it using Jquery

2 Answers2