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

-4

<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再次任何地方，隐藏效果将停止并恢复正常。隐藏除此之外的所有元素，并再次显示所有元素

来源

2017-04-18 Arizonay

你尝试过这么远吗？ –

首先，永远不要使用id两次...使用＃e3button或其他链接 - 你不能隐藏身体本身，因为＃e3是身体的孩子。你可以做的就是隐藏除e3以外的所有div - 你只有一个链接，并隐藏这个链接总是相同的id，除了相同/以前定义的一个？ – Proximate

这可能对你有帮助吗？ http://stackoverflow.com/questions/13239331/hide-all-divs-except-one – Proximate

像这样的东西？注意：确保给你的隐藏链接一个唯一的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元素水平延伸，因此文本“元素2X”右侧的点击仍然会在＃e2上。

来源

2017-04-18 19:10:23 trincot

@trincot现在工作正常。+ 1 –

太棒了！ 9更多去 – ProgrammerV5

是否有可能保持在其主要地方的元素？而不是跳到头上。 – Arizonay

$('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帮助{显示：无;}，并添加和被点击时，E2删除此类别和被点击的身体时，删除此课程，但上述

来源

2017-04-18 19:16:29

如提供不E2事情是这样的：

// 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>

来源

2017-04-18 19:16:42

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

回答

相关问题