Question

<body>
    <div id="e1">Element X1</div>
    <div id="e2">Element 2X</div>
    <div id="e3">Element X3</div>
    <a href="/" id="e3">Hide</a>
</body>

我如何隐藏整个body并且仅在点击#e2时显示#hide，但如果我再次点击#e2之外的其他地方，则隐藏效果将停止并恢复正常。

Answer 1

这样的东西？注意：确保为您的隐藏链接提供唯一的ID。

显示/隐藏适用于jQuery show和hide方法，但由于您希望元素保留在原位，因此更适合使用visibility样式属性：

$('#hide').click(function () {
    // hide all in body except #e2, and #e2's parents.
    $('body *').not($('#e2').parents().addBack()).css({visibility: 'hidden'});
    return false; // cancel bubbling and default hyperlink effect.
});

$('#e2').click(function () { // click on #e2
    return false; // cancel bubbling -- ignore click.
})

$(document).click(function (e) { // click on document
    $('body *').css({visibility: 'visible'}); // show all in body.
});

div { border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="e1">Element X1</div>
<div id="e2">Element 2X</div>
<div id="e3">Element X3</div>
<a href="/" id="hide">Hide</a>

请注意，这些div元素横向延伸，因此文本“Element 2X”右侧的单击仍将位于＃e2上。

Answer 2

这样的事情：

＆＃13;

// Get reference to the hyperlink
var hideElem = document.getElementById("e4");

// Set up click event handler for link
hideElem.addEventListener("click", function(e){
  var elems = document.querySelectorAll("body *:not(#e2)");
  
  Array.prototype.slice.call(elems).forEach(function(value){
   value.classList.add("hide");
  });
  e.stopPropagation();
});

// Set up click event handler for document
document.addEventListener("click", function(){
  var elems = document.querySelectorAll("body *");
  
  Array.prototype.slice.call(elems).forEach(function(value){
   value.classList.remove("hide");
  });
  
});

＆＃13;

.hide { display:none; }

＆＃13;

<div id="e1">Element X1</div>
<div id="e2">Element 2X</div>
<div id="e3">Element X3</div>
<a href="#" id="e4">Hide</a>

＆＃13;

Answer 3

$('body').click(function(evt){    
if(!$(evt.target).is('#e2')) {
        //If not e2 is clicked then restore the state back of page by removing a specific class 
 }
});

您将需要css类.hide {display：none;}的帮助，并在单击e2时添加和删除此类，并在单击body时删除此类但不是上面提供的e2

隐藏除一个之外的所有元素，并再次显示所有元素

3 个答案: