Question

我的jQuery Accordion遇到了一些问题。它包含一个复选框，一个小图像和一个包含在段落标记中的文本行。

我遇到的问题是我必须为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 -----*/

非常感谢任何帮助。我还在学习，请原谅我的代码中的任何错误。

Answer 1

检查你的代码......你的输入标签中有unchecked;的复选框，这是无效的...如果你不想检查它，那么就不要指定{ {1}}属性。

此外，您的checked="checked"代码还有一个单独的结束标记。看看这个fiddle。最后，我不相信你必须在javascript中指定自动高度......我相信这是默认设置。

希望这有帮助！

jQuery手风琴高度与内容冲突

1 个答案: