Close menu by clicking outside it or the open button

Asked

Viewed 9,851 times

2

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

Follows 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

  • You can use Hide and show, or toggle to show/hide the menu when clicking the button

  • http://jsfiddle.net/q0qvd6yx/ Some modifications.

  • Earendul thank you for answering. I’ve tried several ways to execute what I need, but when clicking on the element, I need to give it another styling, changing font color, background, etc. For this I need to use addClass. I also need the submenu to be active, because in the project, some submenus will have forms and things like that. In your Fiddle they close by clicking inside the submenu. Anyway thank you for answering. Thank you so much.

  • Mauro, try to improve and clarify the own question when questions or misunderstandings arise. It is easier to see everything there than spread in comments.

1 answer

4


I suggest two amendments:

  • look for .closest('.hover') to know if the click was inside the menu or not

Example:

$(document).click(function (e) {
    if (!$(this).closest('.hover').length) $('.menu_btn').removeClass("hover");
});
  • add max-width: 200px; also in the .menu_btn

not to interfere with clicking off the menu.

.menu_btn {
    max-width:200px;
}

To make the menu close also when clicking on the suggest button as the code below. That is using

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

Example: http://jsfiddle.net/1zfdtk91/

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>
<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>

I removed your var e=window.event||e; because besides being to re-declare the variable that the function passes is unnecessary because the e jQuery is already normalized.

  • Sergio, thank you for answering. My biggest problem in this whole code is that the element needs to close when clicking outside and also on the button, but not close when it has content. Your code greatly improved what I had done, but still presents the same problem, which I researched a lot today and did not find solution yet.

  • @Mauroalves is what you are looking for: http://jsfiddle.net/pmg85dph/3/ ? (that is also close when you press the button)

  • almost, because I need the submenu to be clickable, because in the project forms will be inserted and other elements will need to be used, so it only has to close by clicking off or the initial clickable element.

  • 1

    @Mauroalves ok, so if I understand you like this: http://jsfiddle.net/1zfdtk91/

  • 1

    Sergio perfect. That’s exactly what I wanted. I tested it here on my project and it worked perfectly. Thank you very much.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.