单击时关闭下拉菜单

Question

I want to make the dropdown close when clicking anywhere in a document, currently it only closes when I click on the dropdown menu itself. Here's what I currently have of the HTML and JQuery:

HTML:

<div class="user-menu">
            <div id="dropdown" class="ddmenu">
                  <img src="#" class="user-menu-pic" alt="">
                <span>Name Lastname</span>
                <img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt="">
              <ul>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">Change profile picture/background</a></li>
                <li><a href="#">Settings</a></li>
                <li><a href="#">Change password</a></li>
                <li><a href="#">Sign Out</a></li>
              </ul>
            </div>
        </div>

Jquery:

      $('#dropdown').on('click', function (e) {
    e.preventDefault();
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).children('ul').slideUp('fast');
    } else {
        $(this).addClass('open');
        $(this).children('ul').slideDown('fast');
    }
});

Answer 1

I think you are looking for something like this:

JSFiddle : DEMO

  $('#dropdown').on('click', function (e) { e.preventDefault(); if ($(this).hasClass('open')) { $(this).removeClass('open'); $(this).children('ul').slideUp('fast'); } else { $(this).addClass('open'); $(this).children('ul').slideDown('fast'); } }); $(document).mouseup(function (e) { var container = $("#dropdown"); if (!container.is(e.target) // if the target of the click isn't the container... && container.has(e.target).length === 0) // ... nor a descendant of the container { container.children('ul').slideUp('fast'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="user-menu"> <div id="dropdown" class="ddmenu"> <img src="#" class="user-menu-pic" alt=""> <span>Name Lastname</span> <img src="images/dropdown-icon.png" class="right dropdown-icon" width="30" height="30" alt=""> <ul> <li><a href="#">My Profile</a> </li> <li><a href="#">Change profile picture/background</a> </li> <li><a href="#">Settings</a> </li> <li><a href="#">Change password</a> </li> <li><a href="#">Sign Out</a> </li> </ul> </div> </div> 

Note : Actually it doesn't need two clicks, it's working with very first click. But you can see that when you click on Menu(very first time), so it is already open(ie Already slideDown) and does not have class open . So it executes the loop which returns false for hasClass("open") . Now in that loop we say menu to slideDown , which is already in the slideDown State.

If you want better explanation do me a favor add class="ddmenu open" to your html like this: <div id="dropdown" class="ddmenu open"> and then try it again.