Question

我现在有一个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中，那就太好了，因为我不熟悉任何其他语言。提前感谢您的帮助！

编辑：因此，在搜索互联网后，我发现了一些看起来很有希望的东西。我不是一个小家伙，但我想我会试一试：

   // 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来处理我的代码。我不确定改变“下拉”和“手风琴”的价值（如果我甚至不得不改变手风琴）

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

EDIT2：

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

Answer 1

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

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

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

Serverside：fx。使用PHP，您可以建立如下链接：www.example.com/？accordion = 1，？accordion = 2等。然后检查此URL参数并相应地设置CSS。

Answer 2

看起来我正在与这个项目走向不同的方向。框架集是我正在使用的。谢谢大家的帮助！

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

2 个答案: