JQuery скрывается выпадающее меню при нажатии другого элемента

Question

У меня есть следующий HTML для создания выпадающего меню:

<li class="user-section user-section-original"> 
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/> 
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span> 
</li> 
<li class="user-section-dropdown user-section hidden"> 
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/> 
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span> 
    <a href="{% url logout %}" class="dropdown-item">Log Out</a> 
</li> 

Когда пользователь нажимает кнопку меню, это будет выпадающим, а затем, если пользователь нажимает кнопку снова (или клики в любом месте за пределами раскрывающегося меню), он снова скроется.

Вот то, что я до сих пор:

$("#header li.user-section").click(function() { 
    $("#header .user-section-dropdown").css('display', 'block'); 
    $("#header .user-section-original").css('display', 'none'); 
}); 

Это делает выпадающий счета появляются, когда раздел счета щелкнул. Как я могу сделать это, также исчезает, когда его снова нажимают, или нажимается другой раздел на странице?

Answer 1

Вам просто нужно добавить прослушиватель кликов на весь документ и скрыть раскрывающееся меню, если оно показано.

$(document).click(function() { 
    if($("#header .user-section-dropdown").css('display') == 'block') { 
     $("#header .user-section-dropdown").css('display', 'none'); 
     $("#header .user-section-original").css('display', 'block'); 
    } 
}); 

Кроме того, вы должны изменить первоначальную функцию так, чтобы она обрабатывает оба случая:

$("#header li.user-section").click(function(e) { 
    if($("#header .user-section-dropdown").css('display') == 'none') { 
     $("#header .user-section-dropdown").css('display', 'block'); 
     $("#header .user-section-original").css('display', 'none'); 
     e.stopPropagation() 
    } 
    else { 
     $("#header .user-section-dropdown").css('display', 'none'); 
     $("#header .user-section-original").css('display', 'block'); 
    } 
}); 

e.stopPropagation() используется, чтобы не допустить обработчик нажмите документ дозвонились.

Answer 2

Я думаю, что самым простым способом было бы переключить класс вместо прямого применения стиля.

$("#header li.user-section").click(function() { 
    $("#header .user-section-original").toggleClass("hidden"); 
}); 

Затем в CSS сделать не-семантический класс как

.hidden { display:none; } 

Чтобы сделать его уйти, когда вы щелкаете где-нибудь еще попробовать:

$(​window).click(function(e){ 
    var $target = $("#header .user-section-original"); 
    if($target.hasClass("hidden"); 
     $target.removeClass("hidden"); 
})​ 

Answer 3

О функции мыши, вы можете добавить следующий код

$('li[class$="dropdown"]').css('display', 'none') 

это установит все элементы li, заканчивающиеся на dorpdown display:none, а затем вы можете отобразить указанное выпадающее меню display:block. Наконец и будет иметь что-то вроде

$(".specificliclass").click(function(){ 
$('li[class$="dropdown"]').css('display', 'none'); 
$('.specificliclass').css('display', 'block') 

}); 

Answer 4

Я знаю, правильный ответ был дан, но я хотел бы разделить этот плагин с вами: http://benalman.com/projects/jquery-outside-events-plugin/

Это простой плагин, который связывает клики вне элемента , Внутри этой функции bind вы просто проверяете, является ли ваш элемент видимым или скрытым. Это видно, скрыть.

Answer 5

простой, просто используйте stopPropagation в вашем меню и дайте 'click' метод clickClass 'removeClass';
tip: для перемещения всего тела влево/rigtht, вы перемещаете элемент тела вместе с вашим меню; Я просто применил этот метод. взял меня ОДИН день! Один день.

$('.button').bind('click', function(e) { 
    e.stopPropagation(); 
    $('.menu').toggleClass('slide'); 
}); 


// slide out when click other parts of current page 

$(document).click(function(){ 
    $('.menu').removeClass('slide-in'); 
});