在我的html页面中，我有一个工具提示内容（仅由css元素构建，不含javascript）。 我打算在工具提示内容中插入单个手风琴内容（仅由css构建），在单击时向上滚动。
以下是我的CSS和HTML代码的示例：
<html>
<head>
<!-- SOURCE accordion CSS jsfiddle.net/m_raffaele/E4acF/ -->
<!-- SOURCE tooltip CSS http://inserthtml.com/demo/pop-in-dialogue/ -->
<style>
.id-content {
width: 608px; height: 854px;
margin:0 auto;
background:yellow;
}
/* TOOLTIP Bawah */
.container-2b {
width:608px; height:854px;
position: relative;
float:right;
z-index:15;
margin: 0 auto;
}
.container-2b input {
display: none;
}
.container-2b input:checked + .popbox-2b {
opacity: 0.9;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
font-variant: normal;
padding:10px 5px 5px 5px;
}
/* ICON klik url(../../images/idsirtii/b4tap.jpg); background-size:99px 130px;*/
.container-2b label {
width:99px; height:130px;
position: relative;
float:right; margin-top:-182px;
background-color:green;
}
.container-2b label:checked + {
width:99px; height:130px;
position: relative;
float:right;
background-color:red;
}
/*buat kotak tooltip POP UP yg muncul*/
.popbox-2b {
width:598px; height: 830px; background: grey;
border: 1px solid transparent; opacity: 0;
position: relative;
margin-top:-182px;
z-index: 10;
color:white;
font-size:12px; font-family: "scada-regular"; color:white;
text-align:center; line-height:1.5em;
box-shadow-opacity;0.5;
/*gradien warna
box-shadow: inset 0px 40px 60px -30px rgba(200,200,255,1), 0px 0px 20px rgba(0,0,0,0.1);
/* border-radius: 7px; efek ujung tumpul */
-moz-perspective: 1000;
-ms-perspective: 1000;
-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-webkit-transition: all fade;
-moz-transition: all fade;
-ms-transition: all fade;
}
/*****************************************
ACCORDION TAB
******************************************/
/*
*
* Author: Michael Raffaele <michael@mraffaele.com>
* Date: 25th October 2011
* Info: http://www.mraffaele.com/blog/2011/10/25/css-accordion-no-javascript/
*
*/
/* Shared for all accordion types margin-top:-500px; */
.accordion {
width:550px;
font-family:"strait"; font-size:14px;
margin:0 auto;
background:#fcf;
position:absolute;
bottom: 0px;
}
.accordion ul {
list-style:none;
margin:0;
padding:0;
}
.accordion li {
margin:0;
padding:0;
}
.accordion [type=radio], .accordion [type=checkbox] {
display:none;
}
.accordion label {
position:relative; bottom:0;
background:blue; display:block;
cursor:pointer;
font-size:16px; color:white; line-height:16px;
-webkit-transition: all .1s ease-out;
-moz-transition: all .1s ease-out;
text-transform:uppercase;
}
.accordion ul li label:hover, .accordion [type=radio]:checked ~ label, .accordion [type=checkbox]:checked ~ label {
background:red;
color:#FFF;
}
.accordion .content-acc {
padding:0 10px;
overflow:hidden;
border:1px solid #fff; /* Make the border match the background so it fades in nicely */
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
}
.accordion p {
color:red;
margin:0 0 10px;
}
.accordion h3 {
color:blue;
padding:0;
margin:10px 0;
}
/* Vertical */
.vertical ul li {
overflow:hidden;
margin:0 0 1px;
}
.vertical ul li label {
padding:10px;
}
.vertical [type=radio]:checked ~ label, .vertical [type=checkbox]:checked ~ label {
border-bottom:0;
}
.vertical ul li label:hover {
/* border:1px solid #542437; We don't want the border to disappear on hover */
}
.vertical ul li .content-acc {
height:0px;
border-top:0;
}
.vertical [type=radio]:checked ~ label ~ .content-acc, .vertical [type=checkbox]:checked ~ label ~ .content-acc {
height:300px;
/*border:1px solid #542437; */
}
</style>
</head>
<body>
<div class="id-content">
<!--TOOLTIP-->
<div class="container-2b">
<label for="activate-2b" class="container-2b"></label>
<input type="checkbox" name="activate-2b" id="activate-2b" />
<div class="popbox-2b"></div>
</div>
<!--div TOOLTIP-->
<!--ACCORDION-->
<div class="accordion vertical">
<ul>
<li>
<input type="checkbox" id="checkbox-1" name="checkbox-accordion" />
<label for="checkbox-1">This is an example accordion item</label>
<div class="content-acc">
<br/ >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec posuere lorem. Pellentesque hendrerit, lorem
luctus porttitor vestibulum, eros sapien mattis libero, euismod congue
neque nisi at ipsum. Mauris semper ipsum sit amet metus semper
malesuada. Donec vel est justo, ac porta diam.</p>
</div>
</li>
</ul>
</div>
</body>
</html>
但是当我把'accordion vertical'div放在工具提示'pop-box2b'中时，手风琴似乎无处出现，而不是在工具提示'pop-box2b'区域内，我无法找到它所在的位置。
这两个内容（工具提示和手风琴）都使用复选框。
可能是因为我在同一页面中使用了2个复选框？
有人可以帮助我找出代码中是否有错误，如果我错误地放置/修改手风琴内容？
如果我把它放在工具提示弹出框区域内，为什么不会出现手风琴呢？
答案 0 :(得分：0)
无法清楚地理解你的问题 - 不确定这是否是你想要的。但看看，让我知道......
<http://jsfiddle.net/Diezel23/L8g6z/1/>