jQuery アコーディオンに問題があります。チェックボックス、小さな画像、段落タグで囲まれたテキスト行が含まれています。
私が抱えている問題は、アイコンを表示するために UI アコーディオンの高さを設定する必要があることです。高さを設定しないと、アコーディオンは一番上の行を表示するだけで失敗し始め、それでも半分が表示されません。
ここに私のHTMLがあります：
<div class="ui-accordion" id="jQueryUIAccordion">
<h3><a href="#">My Accordion</a></h3>
<div>
<ul class="badList">
<li class="list1">
<input class="accord1" value="layer1" id="check1" type="checkbox" unchececked;" />
<img class="accord" src="img/blue/img1.png" width="33" height="37"></img>
<p class="list"> Pick Me 1</p>
</li>
<li class="list2">
<input class="accord1" value="layer1" id="check1" type="checkbox" unchececked;" />
<img class="accord" src="img/blue/img2.png" width="33" height="37"></img>
<p class="list"> Pick Me 2</p>
</li>
<li class="list3">
<input class="accord1" value="layer1" id="check1" type="checkbox" unchececked;" />
<img class="accord" src="img/blue/img3.png" width="33" height="37"></img>
<p class="list"> Pick Me 3</p>
</li>
<li class="list4">
<input class="accord1" value="layer1" id="check1" type="checkbox" unchececked;" />
<img class="accord" src="img/blue/img4.png" width="33" height="37"></img>
<p class="list"> Pick Me 4</p>
</li>
<li class="list5">
<input class="accord1" value="layer1" id="check1" type="checkbox" unchececked;" />
<img class="accord" src="img/blue/img5.png" width="33" height="37"></img>
<p class="list"> Pick Me 5</p>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery("#jQueryUIAccordion").accordion({
event: "click",
collapsible: true,
autoHeight: true
});
</script>
ここに私のCSSがあります:
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
font-size: small;
}
.ui-helper-hidden-accessible {
position: absolute;
left: -1e+008;
font-size: small;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: small;
list-style: none;
}
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix {
height: auto;
}
.ui-helper-clearfix {
display: block;
width: 250px;
}
/* end clearfix */
.ui-helper-zfix {
width: 250px;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter: Alpha(Opacity=0);
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana, Arial, sans-serif; font-size: 1.1em; border: 2px solid #334A6F; margin: 0 20px 20px 0; background-color: #CCCCCC; }
.ui-widget .ui-widget {
font-size: 1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
font-family: Verdana, Arial, sans-serif;
font-size: 1em;
}
.ui-widget-content a {
color: #334A6F;
width: 250px;
font-size: small;
}
.ui-widget-header a {
color: #334A6F;
width: 250px;
font-size: small;
}
/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #334A6F;
font-weight: normal;
width: 250px;
font-size: small;
background-color: #001D4B;
}
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
color: #e3e3e3;
text-decoration: none;
width: 250px;
font-size: small;
}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
border: 1px solid #334A6F;
font-weight: normal;
color: #ffffff;
width: 250px;
font-size: small;
background-color: #334A6F;
}
.ui-state-hover a, .ui-state-hover a:hover {
text-decoration: none;
width: 250px;
font-size: small;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
border: 1px solid #cccccc;
background: #ffffff;
font-weight: normal;
color: #FFFFFF;
width: 250px;
font-size: small;
}
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
color: #334A6F;
width: 250px;
font-size: small;
}
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix {
}
.ui-accordion .ui-accordion-header-active {
border-bottom: 0 !important;
background-color: #F00;
}
.ui-accordion .ui-accordion-header a {
display: block;
font-size: 1em;
padding: .5em .5em .5em .7em;
width: 250px;
}
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a {
zoom: 1;
}
.ui-accordion .ui-accordion-header .ui-icon {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: 24px;
background-color: #F00;
}
.ui-accordion .ui-accordion-content {
padding: 1em 1em;
border-top: 0;
margin-top: 1px;
position: relative;
top: 1px;
margin-bottom: 1px;
overflow: hidden;
display: none;
zoom: 1;
background-color: #F00;
}
.ui-accordion .ui-accordion-content-active {
display: block;
background-color: #CCC;
height: 125px;
}
----------------------------------*/
ul.badList {
list-style-type: none;
padding-left:20px;
float: left;
}
ul.badList1 {
list-style-type: none;
padding-left:20px;
float: left;
position:absolute;
}
LI.list1 { float: left; left: 5px; top: 1px; height: 35px;line-height: 45px; list-style-position: outside; padding-left: 20px; position: absolute; width: 200px; }
p.list { margin-left: 45px; margin-top: 6px; padding-bottom: 2px;}
.accord1 { top:8px; left: 4px; position: absolute;}
.accord2 { top:8px; left: 4px; position: absolute;}
img.accord { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; background-position: 0px 2px 0px 35px; margin-top: 2px; }
img.accord2 { border: 0 none; float:left; padding-right:10px; background-repeat: no-repeat; top: -3px; left: 20px; margin-top: 6px; }
/*----- END -----*/
どんな助けでも大歓迎です。私はまだ学んでいるので、コードのエラーを許してください。