Question

我有10个具有相同类名“dp-check”的html div，我将其用作组件并在同一页面中的大量时间使用。现在我的问题是，当我点击其中一个时，所有div都被隐藏，然后它的“display”被设置为“inline”（只有那个实例）而所有其他的都被隐藏了，我想关闭任何其他具有相同类名的div显示或单击页面上的其他位置。

Answer 1

试试这个：

function clickHandler(e){
    e = e || window.event;
    var elements = document.getElementsByClassName('dp-check');
    for(var i = 0; i < elements.length; i++){
        elements[i].style.display = 'none'; // Hide all elements.
    }
    e.target.style.display = 'inline'; // Show the clicked element.
}

您必须将clickHandler分配给元素上的点击事件。

Answer 2

当使用jQuery单击页面上的其他位置时，您可以隐藏所有dp-check div：

$('body').click(function (event) {
  var $target = $(event.target);
  if(!$target.hasClass("dp-check") ) {
    $("dp-check").css('display','none');
  }
}

单击一个时，隐藏具有相同类名的其他元素

2 个答案: