Close menu by clicking outside it or the open button

Question

Close menu by clicking outside it or the open button

Navigation

#1 by (4 votes)

2

I am creating a menu structure that when clicking on the element, will display a submenu. I need to do this using addClass , since I need to change the styling of the elements when clicking. When clicking inside the submenu, it should remain open, but it should be closed if you click on the parent element of the submenu or anywhere else.

Follow the structure

HTML:

   <div class="menu_btn">
      <a href="#">Botão</a>
      <div class="submenu">
         <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
         </ul>
      </div>
   </div>

CSS:

.menu_btn a{
    color:#000;
    background:#fff;
    text-decoration:none;
    border:1px solid transparent;
    padding:5px;
}
.hover a{
    color:red;
    border:1px solid red;
    border-bottom:0
}
.submenu{
    display:none;
    max-width:200px;
    border:1px solid red;
    margin-top:3px
}
.hover .submenu{
    display:block;
}

JQuery:

$(document).ready(function(){
    $(".menu_btn").click(function(e){
        var e=window.event||e;
        $(this).addClass("hover");
        e.stopPropagation();
      });
    $(document).click(function(e){
        $('.menu_btn').removeClass("hover");
    });
});

JsFiddle

jquery

asked by anonymous 31.10.2014 / 20:10

1 answer

How to perform a date verification? Command for Fill Effect in Excel VBA

score 4 · Accepted Answer

I suggest two changes:

search for .closest('.hover') to see if the click was within the menu or not

Example:

$(document).click(function (e) {
    if (!$(this).closest('.hover').length) $('.menu_btn').removeClass("hover");
});

add max-width: 200px; also in .menu_btn

not to interfere with the click off the menu.

.menu_btn {
    max-width:200px;
}

To make the menu close also when clicking the suggest button as the code below. In other words, using

$(".menu_btn > a").click(function (e) {
    $(this).closest('.menu_btn').toggleClass("hover");

Example: link

All code:

$(document).ready(function () {
    $(".menu_btn > a").click(function (e) {
        $(this).closest('.menu_btn').toggleClass("hover");
        e.stopPropagation();
    });
    $(document).on('click', function (e) {    
        if (!$(e.target).closest('.hover').length) $('.menu_btn').removeClass("hover");
    });
});

.menu_btn {
    max-width:200px;
}
.menu_btn a {
    color:#000;
    background:#fff;
    text-decoration:none;
    border:1px solid transparent;
    padding:5px;
}
.hover a {
    color:red;
    border:1px solid red;
    border-bottom:0
}
.submenu {
    display:none;
    max-width:200px;
    border:1px solid red;
    margin-top:3px
}
.hover .submenu {
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="menu_btn"> <a href="#">Botão</a>

    <div class="submenu">
        <ul>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
            <li>Item</li>
        </ul>
    </div>
</div>

I removed its% with% since in addition to re-declaring the variable that the function passes is unnecessary because the var e=window.event||e; that jQuery passes to the function is already normalized.