Скрыть элемент при потере фокуса - PullRequest
Новая
       8

Скрыть элемент при потере фокуса

4 голосов
/ 14 марта 2012

Я работаю над выпадающим меню css и jquery.Я хочу, чтобы меню было открыто до тех пор, пока я не нажму что-нибудь или пока я не выберусь из меню.

Это то, что я пробовал: 

$('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
});

$('*').not('#optionButton').click(function() {
$('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

Но это не работает так, как я ожидал.

Ответы [ 4 ]

4 голосов
/ 14 марта 2012

Когда вы щелкаете по объекту DOM, он генерирует событие, что означает, что он начинается с самого определенного объекта и всплывает вверх по дереву DOM, пока не достигнет объекта document.Вы можете предотвратить всплытие события в дереве DOM, вернув false. 

$(document).click(function() {
  $('#dropMenu').hide();
});

$('#optionButton').click(function() { 
  $('#dropMenu').show();
  return false;
});

Обратите внимание, как я использовал методы hide и show вместо css('visibility' , 'visible/hidden').Эти два на самом деле делают немного разные вещи , если вы просто хотели скрыть элемент, метод hide является самым простым способом сделать это в jQuery.

Вы можете увидеть рабочий пример этого на jsFiddle .

3 голосов
/ 14 марта 2012

Я провел эксперимент только с CSS.Может быть, это работа для вас.

Чек http://jsfiddle.net/ZuLHb/1/

3 голосов
/ 14 марта 2012

Попробуйте это: 

$("body").click(function(e) {
    if ( e.target.id === "optionButton" ) {
        $("#dropMenu").css("visibility", "visible");
    }
    else {
        $("#dropMenu").css("visibility", "hidden");
    }
});

Или, более короткая версия того же самого: 

$("body").click(function(e) {
    $("#dropMenu").css("visibility", ( e.target.id === "optionButton" ? "visible" : "hidden" ));
});
2 голосов
/ 14 марта 2012

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

$(document).click(function() {
    $('#dropMenu').css('visibility' , 'hidden') //clicked eanithing else: menu close
});

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

$('#optionButton').click(function(e) {
    $('#dropMenu').css('visibility' , 'visible')    //optionButton clicked, menu visible
    e.stopPropagation();
});

DEMO

...