單擊時關閉下拉菜單

Question

我想在單擊文檔中的任何位置時關閉下拉菜單，當前僅在單擊下拉菜單本身時關閉。 這是我目前擁有的HTML和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

我認為您正在尋找這樣的東西：

JSFiddle：演示

  $('#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> 

注意：實際上，不需要單擊兩次，只需單擊一次即可使用。 但是您可以看到，當您第一次單擊Menu時，它已經打開（即Already slideDown）並且沒有open類。 因此，它將執行為hasClass("open") 返回false的loop 。 現在在該循環中，我們說到slideDown菜單，它已經處於slideDown狀態。

如果您想要更好的解釋，請幫我一個忙，像這樣在您的html中添加class="ddmenu open" ： <div id="dropdown" class="ddmenu open"> ，然后重試。