CSS在更改页面时保持打开折叠菜单
我现在有一个HTML/CSS页面在路上，在中间是一个图像地图。在左边我有一个CSS的手风琴菜单。这个想法是，当用户打开accordion菜单时，当他们通过单击图像的一部分切换到下一页时，accordion将保持对该位置的打开。这是训练用的。所以指令在左手边，他们可以在中间的图像地图上做。这是我为手风琴准备的CSS：
以下是样式表：
body {
background-color: #000000;
}
div.img {
float: right;
Border: 1px solid white;
}
.right {
margin: auto;
}
.accordion {
width: 350px;
box-shadow:
0px 0px 0px 1px rgba(12,12,12,0.3),
0px 2px 2px rgba(0,0,0,0.1);
Float: left;
Position: fixed;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 5px 20px;
position: Relative;
display: block;
height: 30px;
cursor: pointer;
color: #FFFFFF;
line-height: 33px;
font-size: 19px;
background: #3333ff;
border: 1px solid #CCC;
}
.accordion name:hover {
background: #F3FF3F3;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
background: #ff2000;
color: #FFFFFF;
box-shadow:
0px 0px 0px 1px rgba(155,155,155,0.3),
0px 2px 2px rgba(0,0,0,0.1);
}
.accordion input {
display: none;
}
.accordion .content {
background: rgb(255, 255, 255);
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .content p {
font-family: "Arial";
color: #777;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .content {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.accordion input:checked ~ .content.ac-medium {
height: 195px;
}下面是HTML：
<html>
<head>
<p style="color:white;float:top-left;font-family:Arial;font-size:25px;margin-bottom:0px;">Title</p>
<p style="color:white;float:top-left;font-family:Arial;font-size:15px;margin-top:0px;margin-bottom:0px;"> Subtitle</p>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<br>
<br>
<div class="container">
<div class="accordion">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1">Description</label>
<div class="content ac-medium">
</p>
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3">Description</label>
<div class="content ac-medium">
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4">Description</label>
<div class="content ac-medium">
Description
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5">Category</label>
<div class="content ac-medium">
Description
</div>
<div>
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6">Category</label>
<div class="content ac-medium">
Description
</div>
</div>
</div>
</div>
</div>
</div>
<div class="img">
<div class="right">
<img src="CWS.png" width="1200" height="900" usemap="#CWS" />
</div>
</div>
<map name="CWS">
</map>
</html>如果这可以保留在CSS和HTML中，那就太好了，因为我不熟悉任何其他语言。提前感谢您的帮助！
编辑:所以在网上搜索之后，我发现了一些看起来很有希望的东西。我不是java爱好者，但我想我应该试一试：
// Initialize Stop Var
var stop = false;
// When the Drop Down is Clicked, Set Stop Var to True
$("#drop-down").click(function(event) { stop=true; });
// Prevent Accordion Close if Stop Var Set
$("#accordion").click(function(event) {
if (stop) {
event.stopImmediatePropagation();
event.preventDefault();
stop = false;
}
});我想我的问题是，我如何实现上面的java来与我的代码一起工作。我不确定应该将“down”和"accordion“更改为什么值(如果我甚至必须更改accordion)
这将是独立的，因此不会有任何服务器端代码。
Edit2：
看起来我可能不被允许使用java...有没有办法在切换屏幕时不刷新菜单？
回答 2
Stack Overflow用户
发布于 2015-12-29 00:45:03
您需要某种方法来告诉页面需要设置/更改某些内容。
HTML:创建用户可以单击的所有页面，并添加显示所需结果所需的CSS。Fx。www.example.com/page1.html，page2.html等。然后在accordion中专门设置显示/隐藏。
Javascript:使用所需的选项/选择设置cookie，然后在页面加载时读取该cookie。这并不完美，因为在呈现页面时，您可能会遇到闪烁。
Serverside: fx。使用PHP你可以这样做你的链接: www.example.com/?accordion=1，?accordion=2等。然后检查此URL参数，并相应地设置CSS。
Stack Overflow用户
发布于 2015-12-30 03:59:38
看起来我在这个项目上走了一个不同的方向。框架集是我将使用的。感谢大家的帮助！
https://stackoverflow.com/questions/34494363
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号