如何使用javascript顯示/隱藏div？

-3

所以我想隱藏一個用戶設置的div，它顯示當用戶點擊一個小cog圖標時。什麼是我最好的方式去做這件事？如何使用javascript顯示/隱藏div？

我做了幾個很基本的圖片來展示我所追求的：

休息日：

enter image description here

公開賽：

enter image description here

一旦用戶點擊圖標（紅點）然後我想要隱藏的div將內容推到右邊。我看了一下CSS複選框破解，但是這需要用戶直接點擊圖標（紅點）來關閉隱藏的div。我想擁有它，以便用戶可以單擊頁面上的任何其他位置來關閉div。

任何人都知道如何用純js做到這一點？

任何幫助非常感謝，謝謝！

來源

2014-10-18 mildrenben

笏HAZú三聯體？ – nicael 2014-10-18 17:46:22

你用Google搜索嗎？ – Lrrr 2014-10-18 17:47:12

你有多遠？ – Donal 2014-10-18 17:47:19

您可以試試tabindex="-1"以便使用:focus。

這樣你就可以用純CSS實現它。

#wrapper { 
 
    display: flex; 
 
    position: fixed; 
 
    top: 0; right: 0; bottom: 0; left: 0; 
 
} 
 
#sidebar, #main, #hidden:focus { 
 
    padding: 10px; 
 
} 
 
#sidebar { 
 
    background: #A8D4AF; 
 
} 
 
#main { 
 
    flex-grow: 1; 
 
    background: #96A7B1; 
 
} 
 
#hidden { 
 
    width: 0; 
 
    background: #008DD2; 
 
} 
 
#hidden:before { 
 
    content: ''; 
 
    display: block; 
 
    background: red; 
 
    border-radius: 50%; 
 
    position: relative; 
 
    left: -40px; top: 40px; /* Position of the dot*/ 
 
    width: 20px; height: 20px; /* Size of the dot */ 
 
    margin-bottom: -20px;  /* Same as height */ 
 
} 
 
#hidden:focus:before { 
 
    display: none; 
 
} 
 
#hidden:focus { 
 
    width: auto; 
 
}

<div id="wrapper"> 
 
    <div id="sidebar"> 
 
    Test content 
 
    </div> 
 
    <div id="hidden" tabindex="-1"> 
 
    Hidden stuff 
 
    </div> 
 
    <div id="main"> 
 
    Lorem ipsum dolor 
 
    </div> 
 
</div>

來源

2014-10-18 18:06:56 Oriol

如何使用javascript顯示/隱藏div？

回答

相關問題