单击文档时关闭元素

Question

我对 JavaScript 真的很陌生。

当我单击文档上的任意位置（部分来自扩展内容本身）时，如何关闭扩展元素？

var $cell = $('.card');

//open and close card when clicked on card
$cell.find('.js-expander').click(function() {

  var $thisCell = $(this).closest('.card');

  if ($thisCell.hasClass('is-collapsed')) {
    $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed');
    //$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');

    $thisCell.removeClass('is-collapsed').addClass('is-expanded');

    if ($cell.not($thisCell).hasClass('is-inactive')) {
      //do nothing
    } else {
      //$cell.not($thisCell).addClass('is-inactive');
    }

  } else {
    $thisCell.removeClass('is-expanded').addClass('is-collapsed');
    $cell.not($thisCell).removeClass('is-inactive');
  }
});

//close card when click on cross
$cell.find('.js-collapser').click(function() {

  var $thisCell = $(this).closest('.card');

  $thisCell.removeClass('is-expanded').addClass('is-collapsed');
  $cell.not($thisCell).removeClass('is-inactive');

});

$(document).click(function() {

});

Answer 1

这是一个例子。 该文档有一个点击监听器来关闭所有“展开”的卡片。 'card' 在它的 click 事件中有event.stopImmediatePropagation() ，因此在它内部发生的任何点击事件都不会传播到 DOM（并且不会触发文档的点击事件。

 $('.card').click(function(e) { console.log('card clicked') e.stopImmediatePropagation() }) $(document).click(function() { console.log('body clicked') $('.expanded').removeClass('expanded'); })

 .card { padding: 20px; background: #f00; margin: 100px; }.expanded { padding-top: 100px; } body { background: #ccc; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='card expanded'></div>