隱藏除此之外的所有元素，並再次顯示所有元素

-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

隱藏除此之外的所有元素，並再次顯示所有元素

回答

相關問題