0

When clicked on the open and close button the toggle menu is working fine, I want the menu to close when clicked on body. Thanks in advance for help.

This is my jQuery:

jQuery(function($) {
    $('.sidebar-toggle').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
        $('.sidebar-toggle').toggleClass('sidebar-toggled');
        $('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
    });
    $('.sidebar-toggle-inside').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
    });     
});

and the HTML is:

<div id="page"> 
        <div class="sidebar-toggle sidebar-toggled" style="">
            <i class="fa fa-times"></i>
        </div>
        <div id="content" class="site-content">
            <div class="container content-wrapper">
                <div id="secondary" class="widget-area widget-area-visible" role="complementary" style="">
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <div class="menu-slideoverlaymenu-container">
                            <ul id="primary-menu" class="menu">
                                <li id="menu-item-126"><a href="#">Home</a></li>
                                <li id="menu-item-124"><a href="#">Welcome</a></li>
                                <li id="menu-item-125"><a href="#">About Us</a></li>
                                <li id="menu-item-123"><a href="#">Contact</a></li>
                                <li id="menu-item-122"><a href="#">Solutions</a></li>
                                <li id="menu-item-120"><a href="#">Development</a></li>
                                <li id="menu-item-282"><a href="#">Clients</a></li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

This menu is not a drop down, its menu overlay.

merryxian
  • 13
  • 5
  • Possible duplicate of [jquery drop down menu closing by clicking outside](https://stackoverflow.com/questions/6463486/jquery-drop-down-menu-closing-by-clicking-outside) – Sinto Aug 29 '18 at 05:54
  • @Sinto I have already tried the solutions in the provided link, but its not working. This is not a dropdown menu, its overlay menu. – merryxian Aug 29 '18 at 06:06
  • which of the div you want to close or hide on clicking outside? – Sinto Aug 29 '18 at 06:08
  • @Sinto I want to close this div – merryxian Aug 29 '18 at 06:10
  • 1
    @merryxian It does not matter what kind of menu it is, the logic is the same. You need to attach an eventhandler (like in the linked question) for click-event on the document and when that event occurs, hide the menu same way you do when the user closes the menu in your own implementation. – Esko Aug 29 '18 at 06:12

2 Answers2

1

This edited jQuery script worked for me finally, Thank you all for helping me achieve this.

//Toggle sidebar
jQuery(function($) {
    $('.sidebar-toggle').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
        $('.sidebar-toggle').toggleClass('sidebar-toggled');
        $('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
    });
    $('.sidebar-toggle-inside').click(function() {
        $('.widget-area').toggleClass('widget-area-visible');
    });

$('.site-header, .site-content, .site-footer').click(function(e) {
   e.stopPropagation();
   if ($("#secondary").hasClass("widget-area-visible")) {
       $('.widget-area').toggleClass('widget-area-visible');
$('.sidebar-toggle').toggleClass('sidebar-toggled');
$('.sidebar-toggle').find('i').toggleClass('fa-bars fa-times');
   }    
});

});

This has toggled both the fa button and also closed the menuoverlay.

merryxian
  • 13
  • 5
0

It should be something like this.

$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".widget-area");

    if (container.has(e.target).length === 0) {
        $('.widget-area').toggleClass('widget-area-visible');
    }
})
CodeThing
  • 2,580
  • 2
  • 12
  • 25