CSS 在更改页面时保持手风琴菜单打开答案

【问题标题】：CSS Keep accordion menu open when changing pageCSS 在更改页面时保持手风琴菜单打开
【发布时间】：2016-04-02 08:27:39
【问题描述】：

我现在有一个 HTML/CSS 页面，中间是一个图像映射。在左侧，我在 CSS 中有一个手风琴菜单。这个想法是，当用户打开手风琴菜单时，当他们通过单击图像的一部分切换到下一页时，手风琴将保持在该位置打开。这是为了训练。所以说明在左边，他们可以在中间的图像地图上做。这是手风琴的 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 来处理我的代码。我不确定将“下拉”和“手风琴”更改为什么值（如果我什至必须更改手风琴）

这将是独立的，因此不会有任何服务器端代码。

编辑2：

看起来我可能不允许使用 java.... 有没有办法在更改屏幕时不刷新菜单？

【问题讨论】：

您需要 Javascript 才能做到这一点……仅使用 HTML/CSS 是不可能的。
你指的是图片地图。你是说这一行？ w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
是的。就像那个一样。
我不想听起来好像我没有为此付出任何努力，但是如果我需要 java，有人可以先让我知道代码是什么吗？我不懂java。
如果您将用户重定向到一个新页面，则会向服务器发出一个新请求，这意味着如果没有某种服务器端编程语言，这是不可能的。 你在用吗？如果是这样，请说明我们是否可以提供帮助。

标签： html css menu accordion

【解决方案1】：

您需要某种方式告诉页面需要设置/更改某些内容。

HTML：您创建用户可以单击的所有页面并添加显示所需结果所需的 CSS。外汇。 www.example.com/page1.html、page2.html 等。然后在手风琴中专门设置显示/隐藏。

Javascript：您使用所需的选项/选择设置一个 cookie，然后在页面加载时读取该 cookie。这并不完美，因为在呈现页面时您可能会遇到闪烁。

服务器端：fx。使用 PHP，您可以像这样创建链接：www.example.com/?accordion=1, ?accordion=2 等。然后检查此 URL 参数并相应地设置 CSS。

【讨论】：

不会有任何服务器端。这将是独立的。

【解决方案2】：

看起来我在这个项目上朝着不同的方向前进。我将使用框架集。感谢大家的帮助！

【讨论】：