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

【问题标题】：Hide all elements except one, And show all elements again隐藏除一个以外的所有元素，并再次显示所有元素
【发布时间】：2017-04-18 18:57:35
【问题描述】：

<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并且当我点击#hide时只显示#e2，但是如果我再次点击#e2之外的任何地方，隐藏效果将停止并恢复正常。

【问题讨论】：

首先，永远不要使用 id 两次...使用 #e3button 或其他东西作为链接 - 你不能隐藏 body 本身，因为 #e3 是 body 的孩子。您可以做的是隐藏除 e3 之外的正文中的所有 div - 您是否只有一个链接并隐藏此链接总是相同的 ID，除了相同/先前定义的一个？
对您有帮助吗？ stackoverflow.com/questions/13239331/hide-all-divs-except-one

标签： javascript jquery

【解决方案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。

【讨论】：

太棒了！还有9个去
是否可以将元素保留在其主要位置？而不是直接跳到头上。
当然，使用visibility 样式。我会更新sn-p。
有些奇怪。如果我用 body 替换了 div 容器，第一个 hide 将隐藏所有内容。第二个隐藏将按预期工作
这可能是#e2 在您的设置中不是body 的直接子节点，并且中间节点将被隐藏。通过将not 更改为：not($('#e2').parents().addBack()) 来解决此问题。我用这个更新了sn-p，并使用了body。

【解决方案2】：

类似这样的：

// 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");
  });
  
});

.hide { display:none; }

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

【讨论】：

【解决方案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类的帮助

【讨论】：