jQuery - Показать окно / Скрыть по событию не работает. Зачем?

Question

Я использую эту функцию, чтобы показать список (ul) при нажатии и скрыть его, если кто-то щелкнет в другом месте на странице. Это не похоже на работу:

$(document).ready(function() {
    $('#trigger').click(function() {
        $('#dropdown-options').show();
    });

    $(document).click(function() {
        $('#dropdown-options').hide();
    });

    $('#dropdown-options').click(function(e) {
        e.stopPropagation();
    });
});

(Я использую Ruby on Rails, и кажется, что все должно быть под $(document).ready(function() {...});, чтобы это работало.)

Answer 1

Это на самом деле, потому что документ содержит "#trigger", он отображается и скрывается одновременно. Переместите «stopPropagation» вверх в селектор «#trigger», вам нужно остановить реквизит события, прежде чем документ получит его и снова скроет.

$(document).ready(function() {
  $('#trigger').click(function(e) {
    e.stopPropagation();
    $('#dropdown-options').show();
  });

  $(document).click(function() {
    $('#dropdown-options').hide();
  });
});