如何使用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？

回答

相关问题