close sub-menu dropdown on click anywhere in the page

Question

I have a menubar on top of my page which show sub-menus when clicked and I want to make disappear the sub-menu on click of anywhere in the page. So far i did code to display sub-menu on click of my menu. Below is the code for the same!

Can somebody help me with the existing code to close sub-menu part on click of anywhere in the page?

Many thanks in advance!

 var ddmenuitem = 0; function jsddm_open() { jsddm_close(); ddmenuitem = $(this).find('ul.submenu').css('display', 'block'); $(this).find('ul.submenu').css('transition', '1s'); //$(this).find('div.divsubsubmenu').css('display','none'); } function jsddm_close() { if (ddmenuitem) ddmenuitem.css('display', 'none'); } $(document).ready(function() { $('#topnav > ul > li').bind('click', jsddm_open); $('#topnav > ul > li > a').click(function(ev) { if ($(this).hasClass('current')) { ev.preventDefault(); } if ($(this).attr('class') != 'active') { $('#topnav ul li a').removeClass('active'); $(this).addClass('active'); } }); });

 #topnav { width: 800px; height: 30px; background-color: #191919; margin-top: 10px; position: relative; font-size: 12px; font-family: Verdana; margin: auto; text-align: center; } #topnav ul { list-style: none; padding: 0px; margin: 0px; } #topnav ul li { float: left; margin: 0; padding: 0; } #topnav ul li a.MenuLink { padding: 5px 15px; color: red; text-decoration: none; display: block; font-weight: bold; border: double #161718; border-width: 1.3px; border-top: none; border-bottom: none; } #topnav ul li a:link { color: red; text-decoration: none; } #topnav ul li a:visited { color: #FFF; text-decoration: none; } #topnav ul li a:hover { background-color: black; text-decoration: none; transition: 0.3s; } #topnav ul li a.active { text-decoration: none; color: black; background: #e0e0e0; font-size: 15px; font-weight: bold; } #topnav ul li ul.submenu { float: left; padding: 4px 0; position: absolute; left: 0; top: 30px; display: none; background: #e0e0e0; width: 800px; height: 30px; } #topnav ul li ul.submenu a { display: block; color: #00537F; font-weight: bold; padding: 4px 8px; } #topnav ul.submenu>li:hover>a { background-color: black; color: white; } #topnav ul div { visibility: hidden; } #topnav li:hover ul div.divsubsubmenu { visibility: hidden; } #topnav li li:hover div.divsubsubmenu { visibility: visible; opacity: 1; z-index: 1; } #topnav div.divsubsubmenu { height: 50px; background: black; color: white; float: left; left: 0; width: 800px; position: absolute; } #topnav div.divsubsubmenu>ul>li:hover>a { color: white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="topnav"> <ul> <li> <a class="MenuLink" href="#">Admin</a> </li> <li> <a class="MenuLink" href="#"> MAC </a> <ul class="submenu"> <li><a href="#">Master Data</a></li> <li> <a href="#">Transaction Data</a> <div class="divsubsubmenu"> <ul> <li><a href="#">Company Master</a></li> <li><a href="#">Location Master</a></li> <li><a href="#">Size Master</a></li> </ul> </div> </li> <li> <a href="#">Admin Data</a> </li> </ul> </li> <li> <a class="MenuLink" href="#">TPC </a> <ul class="submenu"> <li><a href="#">TPC1</a></li> <li><a href="#">TPC2</a></li> </li> </ul> </div> </body>

Answer 1

Just add this small code in your javascript:

$("body").on('click', function(e){
    var element = e.target.tagName;
    if(element !== 'A') {
        $("#topnav ul li ul.submenu").css('display', 'none');
    }
  });

Hope this may help you.

close sub-menu dropdown on click anywhere in the page

Question

1 answers

solution1
0 ACCPTED 2018-03-14 09:41:16

close sub-menu dropdown on click anywhere in the page

Question

1 answers

solution1 0 ACCPTED 2018-03-14 09:41:16

solution1
0 ACCPTED 2018-03-14 09:41:16