Question

这里有全新的新手，所以请原谅我犯下的多重失礼。我试图为iBook制作一个小部件，它将具有可扩展的信息。考虑到空间有限，试图用手风琴来做。通过多次迭代（一些只是CSS，其他一些使用CSS + jQuery），我已经落在了下面，我很满意，除非无法正确旋转第二个箭头。是否可以使用收音机/检查方法？

我的代码位于（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

如果您有任何疑问，请不要犹豫。

手风琴菜单上的旋转箭头

1 个答案: