JQuery автоматически скрывать после нажатия при использовании переключения?

Question

Привет, я использую этот простой jquery:

  $(document).ready(function(e) { 
    $("#langs_current").click(function(){    
        $("#langz").toggle(350);  
     });
   });

В настоящее время новый div#langz отображается / скрывается по мере необходимости, но это происходит только тогда, когда я нажимаю на ссылку #langs_current.

Мне нужно, чтобы он автоматически скрывался, если пользователь щелкает по этим ссылкам.Какой самый лучший способ?

Answer 1

Вы можете добавить событие клика в тело страницы, которое будет проверять флажок, чтобы увидеть, показываете ли вы или скрываете div#langz.

var hideLangz = false;

$(document).ready(function(e) {  
  $("#langs_current").click(function(){     
    $("#langz").toggle(350);   
    hideLangz = true;
  });

  $("body").click(function(){     
    if (hideLangz) {
      $("#langz").toggle(350);   
      hideLangz = false;
    }
  });
});

Answer 2

Мой пример здесь: http://jsfiddle.net/zHNtp/

$(document).ready(function(e) { 
    $("#langs_current").click(function(){    
        $("#langz").toggle(350);
        return false;
     });

    $('body').click(function(){
        $('#langz').hide(350);
        return false;
    });
});

должен сделать это.

Answer 3

Вы можете привязать обработчик событий click к элементу document, чтобы захватить все клики на странице. Затем в обработчике события для элемента #langs_current вы можете остановить распространение события click, чтобы оно не достигло элемента document (и его обработчика события):

$(function() { 
    $("#langs_current").click(function(event){

        //stop the propagation of this event so it doesn't reach the `document` element which would hide the `#langz` element
        event.stopPropagation();
        $("#langz").toggle(350);
    });
    $(document).click(function () {
        //the user has clicked on something other than `#langs_current`, run the needed code now

        //hide the `#langz` element if the `document` element receives a `click` event 
        //(which it won't if the user clicks on the `#langs_current` element since it stops the propagation of the event
        $("#langz").hide();
    });
});

• Документы для event.stopPropagation(): http://api.jquery.com/event.stopPropagation/

Вот демонстрация использования event.stopPropagation() для регистрации кликов на элементе: http://jsfiddle.net/aX2VE/1/

Answer 4

Не уверен, подходит ли это для варианта использования, но вы можете прослушать document и проверить currentTarget:

$(document).ready(function(e) {
    $(document).click(function(e) {
        var tg = $("#langz");
        if (e.currentTarget.id == "langs_current") {
             tg.toggle(350);
        } else {
             tg.hide(350);
        }
    }
}

Answer 5

Используйте функцию jQuery .mouseout ().

http://api.jquery.com/mouseout/

Это должно сделать работу.