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();
  });
});

jQuery - 显示框/隐藏事件不起作用。为什么？

1 个答案: