Сделать выпадающее меню закрытым при нажатии

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

Примечание: На самом деле это не нужно два клика, он работает с первым кликом. Но вы можете видеть, что когда вы нажимаете «Меню» (в первый раз), значит, он уже открыт (т. Е. Уже slideDown) и не имеет класса open. Поэтому он выполняет loop, который возвращает false для hasClass("open"). Теперь в этом цикле мы говорим меню slideDown, которое уже находится в состоянии slideDown.

Если вы хотите лучшего объяснения сделать мне одолжение добавить class="ddmenu open" к вашему HTML, как это: <div id="dropdown" class="ddmenu open">, а затем попробовать снова.