Close content when click off menu

Question

Good afternoon, I’m making a site that has a side site by clicking the button the menu comes to appear on the right side of the screen, and I need it to close when it’s clicked anywhere other than the menu so it can close, how can I do this... I’ve been looking on the Internet but I couldn’t understand it very well... someone could help me?

html code:

<div class="menu" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 todo menu-aberto">
            <div onclick="fechar();" class="xis"><i class="fa fa-times fa-2x" aria-hidden="true"></i></div>

            <a class="" href="#">
                <img alt="Brand" src="images/logo-menu/perfil.jpg" class="logo-avatar">
            </a>

            <span>Usúario da Silva </span>

            <a href="#" class="hidden-xs hidden-sm">Sair</a>

        </div>

        <div class="aberto-1">
            <ul>
                <li>Teste</li>
                <li>Teste</li>
                <li>Teste</li>
                <li>Teste</li>
                <li>Teste</li>
            </ul>

        </div>
    </div>

    <section>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    <div class="col-lg-5 col-md-4 hidden-sm hidden-xs pull-left alinhamento-menu text-center">
                        <a href="#">
                            <span>Agenda completa</span>
                        </a>

                        <a href="#">
                            <span>Fale Conosco</span>
                        </a>
                    </div>

                    <div class="col-lg-2 col-md-3 col-sm-9 col-xs-6 text-center logo-flutuante center-block">
                        <img alt="Brand" src="images/logo-menu/placa2.jpg" class="img-responsive logao center-block">
                    </div>

                    <div class="col-lg-5 col-md-5 col-sm-3 col-xs-6 pull-right nav-aparecer">
                        <div class="pull-left">
                            <i class="fa fa-bars fa-2x menu-ativ" onclick="active();" aria-hidden="true"><span class="titulo-menu-btn hidden-xs hidden-sm">Menu</span></i>
                        </div>

                        <a class="" href="#">
                            <img alt="Brand" src="images/logo-menu/perfil.jpg" class="logo-avatar">
                        </a>

                        <a href="#" class="item1 hidden-xs hidden-sm">
                            <span class="users">Usúario da Silva </span>
                        </a>

                        <a href="#" class="hidden-xs hidden-sm sair">Sair</a>
                    </div>
                </div>
            </div>
        </nav>
    </section>

css:

/*menu*/

.aberto-1{
    background-color: #e5e5e5;
    color: #fff;
    width: 23em;
    right: 0;
    top: 0;
    position: fixed;
    float: right;
    z-index: 999;
    margin-top: 55px;
    border-radius: 0 0 5px 5px;
    height: 100%;


    ul{
        list-style: none;
        line-height: 2em;

        li{
            font-size: 18px;
        }
    }
}
.menu-aberto{
    float: right;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999999;
    background-color: $rosa-padrao;
    color: #fff;
    border: 1px solid transparent;
    border-radius: 0 0 3px 3px;
    width: 23em;

    .xis{
        float: left;
        margin-right: 20px;
        z-index: 99999999999;
      margin-top: 10px;
    }

    .item1-aberto, .titulo-menu-btn-aberto, a, span{
        margin: 0 6px;
        padding: 0px;
        color: #fff;
    }
}
    span{
        padding: 10px 15px;
        position: relative;
        display: inline-table;
        color: $cinza-claro;
    }

    a{
        color: $cinza-claro;
    }

    .navbar-default {
        background-color: rgba(248, 248, 248, 0);
        border-bottom: 1px solid $rosa-padrao;
    }

    .alinhamento-menu{
        padding: 18px 0 0;
    }

    .logo-avatar{
    margin-left: 10px;
    padding: 5px 0;
    }

  .users{
    color: $cinza-claro;
    font-weight: bold;
  }

  .sair{
    text-decoration: underline;
  }

    .item1{
        padding-top: 8px;
        display: -webkit-inline-box;
    }

    .logo-flutuante{
        position: relative;
        height: 0px;
        padding-bottom: 5em;
        /*z-index: 99999999999; */
    }

    .nav-aparecer{
        margin-top: 8px;
    }
    /*fim menu*/

Jquery:

$(document).ready(function(){
    $('#menu').hide();
    $('.nav-aparecer').show();
    $('.logao').show();

    $('body').click(function(e){
        //Essa condição verifica se o clique foi diretamente na sua div
        if(e.target.id == "#menu")
        return;
        //Essa condição verifica se o clique foi feito em algum elemento dentro da sua div
        if($(e.target).closest('#menu').length)
        return;
        $('#menu').hide("slow");
        $('.nav-aparecer').show("slow");
        $('.logao').show("slow");
    });

});

function active(){
    $('#menu').show("slow");
    $('.nav-aparecer').hide("slow");
    $('.logao').hide("slow");

}

How can I do that? ie opened the menu by clicking off the menu it closes... Thanks guys.

Answer 1

You need to catch the click of body, and see if the clicked element belongs to the target div.

$('body').click(function(e){    
       //Essa condição verifica se o clique foi diretamente na sua div
       if(e.target.id == "id_da_sua_div_alvo")
          return;
       //Essa condição verifica se o clique foi feito em algum elemento dentro      da sua div. Esse tem '#' porque é um seletor do jquery
       if($(e.target).closest('#id_da_sua_div_alvo').length)
          return;             

      //Aqui você pode colocar seu código

});