手风琴菜单上的旋转箭头

Question

这里是全新的，完全是新手，所以请原谅我犯下的多次失礼。我正在尝试为 iBook 制作一个小部件，它将包含可扩展的信息。鉴于 space 是有限的，尝试使用手风琴来这样做。通过多次迭代（有些只有 CSS，其他有 CSS+jQuery）我已经落在下面，我很高兴除了不能让第二个箭头正确旋转.是否可以使用 radio/checked 方法？

我的代码如下 (Fiddle Link)

CSS:

body {
font-family:’Arial’, sans-serif;      
}

.accordion {
margin: 0 auto;
width: 400px;
}

.accordion > label {
display: block;

}

.rotate {
   padding:0;
  margin:-2px 0 0 0px;
  line-height:20px;
  width:13px;
  position:absolute;

   transition: all 1s ease;
 -o-transition: all 1s ease;
 -moz-transition: all 1s ease;
 -webkit-transition: all 1s ease;
 }

.accordion > input {
display: none;
}

.accordion > div {
max-height: 0;
overflow: hidden;
}

.accordion > input:checked + label + div {
max-height: 500px;
}

.accordion > div > * {
margin: 10px;
}

.accordion > input:checked + label {
background-color: rgba(19,14,109,0.21);
}


.accordion > label {
background-color: rgba(19,14,109,0.08);
border: 1px solid gray;
color: black;
cursor: pointer;
font-weight: bold;
padding: 4px 10px;

}

.accordion > div {

 border-bottom: 1px solid gray; 
 border-left: 1px solid gray; 
border-right: 1px solid gray; 
-webkit-transition: all ease-in-out 1000ms;
-moz-transition: all ease-in-out 1000ms;
-o-transition: all ease-in-out 1000ms;
transition: all ease-in-out 1000ms;
}

input[name='accordion1'] ~ .rotate {
 transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 } 

input[name='accordion1']:checked ~ label .rotate {
 transform: rotate(90deg);
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
 }

HTML

<div class="accordion">
 <input id="acrd1-item1" name="accordion1" type="radio"checked>
     <label for="acrd1-item1"><div class="rotate">&#9654;</div>&nbsp &nbsp Common ICU Sedatives</label>
 <div>
 <p>    
<ul type=“circle”>
 <li><b>Propofol</b></li>
  <ul type=“disc”>
   <li>Dosing: 50 - 200mg/hr, 1-3mg/kg/hr</li>
   <li>Benefits: Half-life of 30-60 minutes</li>
   <li>Adverse effect: Hypotension, bradycardia, hypertriglyceridemia,     pancreatitis</li>
  </ul>
 <li><b>Dexmedetomidine</b></li>
  <ul type = “disc”>
   <li>Dosing: 0.2 - 1.5 mcg/kg/hr</li>
   <li>Benefits: No respiratory suppression</li>
   <li>Adverse effects: Transient hypertension, then hypotension and     bradycardia</li>
  </ul>
 <li><b>Midazolam</b></li>
  <ul type=“disc”>
   <li>Dosing: Bolus, 1-5 mg, 1-5 mg/hr</li>
   <li>Benefits: Less hypotension</li>
   <li>Adverse effects: Long half-life (3-11 hrs), high risk of delirium and     tolerance</li>
  </ul>
</ul>
</p>

</div>

 <input id="acrd1-item2" name="accordion1" type="radio">
 <label for="acrd1-item2"><div class="rotate">&#9654;</div>&nbsp &nbsp     Common ICU analgesics</label>
 <div><p>
<ul type=“circle”>
 <li><b>Fentanyl</b></li>
  <ul type=“disc”>
   <li>Dosing: 20-100 mcg/hr; consider loading dose of 50 to 100mcg</li>
   <li>Adverse Effect: Respiratory depression, hypotension</li>
  </ul>
 <li><b>Morphine</b></li>
  <ul type = “disc”>
   <li>Dosing: 1-5mg/hr, consider loading dose 2-5 mg</li>
   <li>Adverse Effect: Metabolite renally excreted, known to cause     neurotoxicity, respiratory depression, histamine release</li>
   </ul>
</ul>
</p></div>

提前致谢。

Answer 1

您只需要将第二个块放在 div.accordian 中，如下所示：

<div class="accordion">
  <input id="acrd1-item1" name="accordion1" type="radio"checked>
  ...
</div>

<div class="accordion">
  <input id="acrd1-item2" name="accordion1" type="radio">
  ...
</div>

之后就像变魔术一样有效。这是更新后的 Fiddle

如果您还有其他问题，请随时提问。

手风琴菜单上的旋转箭头

Rotating arrow on accordion menu

css

rotation

accordion