gpt4 book ai didi

html - 使用css js显示后隐藏内容

转载 作者:行者123 更新时间:2023-11-28 01:40:11 25 4
gpt4 key购买 nike

我已经设法在单击图像后显示一个菜单。然后,我希望在单击 image2 后再次隐藏菜单。如果有人可以帮助并解释他们的方法是如何工作的,那就太好了!这是代码:

<html>
<head>
<style>
h3 {
font-size: 30px;
}
p {
font-size: 20px;
}

.onclick-menu-content {
position: fixed;
top: -15px;
bottom: -15px;
left: 0px;
right: 0px;

background-color: #000000;
opacity: 0;
}
.onclick-menu-content h3, p, a{
color: #ffffff;
text-align: center;
}

.menu{
position: fixed;
top: 10px;
left: 10px;

}
.menu2{
position: fixed;
top: 10px;
left: 10px;

}
</style>
</head>
<body>
<div class="main-content">
<img src="menu.png" class="menu" onclick="show(onclick-menu-content)">
<h3 style="color: #0000ff; text-align: center"> This is the main Content </h3>
<div class="onclick-menu-content" >
<img src="menu2.png" class="menu2" onclick="hide(onclick-menu-content)">
<h3>Menu</h3>
<p><a href="">Home</a><br />
<br />
<a href="">Services</a><br />
<br />
<a href="">About Us</a><br />
<br />
<a href="">Contact Us</a></p><br />
</div>
</div>

<script>
function show(id) {
document.getElementById(id).style.display = 'block';
}

function hide(id) {
document.getElementById(id).style.display = 'none';
}
</script>
</body>
</html>

所以我编辑了代码,但是要使用js,但是这种方法不起作用。

最佳答案

您的原始解决方案依赖于菜单图像具有 :focus 以显示菜单。这不是一个很好的方法,因为如果用户试图进入菜单,焦点就会丢失在图像上,然后菜单就会消失。

相反,使用一些 javascript 来显示/隐藏您的菜单。我在下面的例子中用 jQuery 完成了它,因为我很懒,所以它需要你包含 jQuery 库。

fiddle :http://jsfiddle.net/nxy9jkdx/1/

HTML:

<div tabindex="0" class="onclick-menu" >
<img src="image.jpg" class="menu2">
<div class="onclick-menu-content hidden">
<h3>Menu</h3>

<ul class="menu-list">
<li><a href="">Home</a>
</li>
<li><a href="">Services</a>
</li>
<li><a href="">About Us</a>
</li>
<li><a href="">Contact Us</a>
</li>
</ul>
</div>
</div>

CSS:

h3 {
font-size: 30px;
}
p {
font-size: 20px;
}
.onclick-menu {
position: relative;

}
.onclick-menu-content {
padding: 10px;
top: -15px;
bottom: -15px;
left: 0px;
right: 0px;
background-color: #000000;
transition: visibility 0.5s;
}
.onclick-menu-content h3, a {
color: #ffffff;
text-align: center;
}
.menu2 {
/* image 2*/
position: fixed;
top: 10px;
left: 10px;
}
.menu-list {
margin: auto;
padding: 0;
text-align: center;
list-style: none;
}
.hidden {
display: none;
}

jQuery(您可以将其放在 <head> 中或恰好放在 </body> 的结尾上方):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script>
/* This tells jQuery not to run the code inside until the DOM is ready */

$(document).ready( function () {

$("img.menu2").on("click", function(){
$(".onclick-menu-content").toggleClass("hidden");
});

});
</script>

关于html - 使用css js显示后隐藏内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26657901/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com