我正在使用jquery accordion widget。我希望小部件中的panles的高度根据其内容进行调整。为此，我尝试使用我们拥有的选项的“setter”方法，并且在实例化时我尝试设置'heightStyle'的值。它甚至适用于一个手风琴小部件实例，但对于我添加的另一个，它根本不起作用。
有没有其他方法来调整高度而不是覆盖手风琴css？
在我的情况下，对于' fullpageaccordion 'div中的手风琴，对于手风琴中第一个元素的所有元素采用相同的高度，尽管我在实例化时给出了heightStyle作为内容/ strong>即可。
请在下面找到我的代码：
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<!--<link rel="stylesheet" href="./css/jquery-ui.css"/>-->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style type="text/css">
#container{
width: 99%;
border: 1px solid #ff00ff;
padding: 5px 5px 5px 5px;
min-height: 750px;
}
#accordiondiv{
position: relative;
width: 30%;
border: 1px solid #dddddd;
float: left;
}
.collapsibledivs{
position: relative;
width:69%;
border: 1px solid green;
min-height: 70px;
float: left;
padding-right: 0.7%;
}
.collapsibleheaders{
background: #efefef;
width: 100%;
float:left;
padding-left: 10px;
}
#fullpageaccordion{
width: 69%;
border: 1px solid blue;
float:left;
}
#fullpageaccordion .accordion h2{
color: rgb(145,186,222);
background:rgb(242,242,242);
}
.deletebtn{
float: right;
width: 30px;
height: 30px;
border-left: 1px solid #dddddd;
cursor: pointer;
background-image: url(./images/minus.png);
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
}
.unorderedlist{
list-style-type: none;
}
.breadcrumdiv{
background: #ffffff;
width: 49%;
min-height: 40px;
float:left;
border: 1px solid pink;
}
.fontformat{
background: #dddddd;
width: 45%;
min-height: 40px;
float:left;
border: 1px solid pink;
}
.breadcrumwrapper{
position: relative;
width:69%;
border: 1px solid green;
min-height: 0px;
float: left;
padding-right: 0.7%;
}
.backbtn{
height: 40px;
width: 40px;
background: url(./images/tool_arrow_right.png);
float: left;
cursor: pointer;
background-repeat: no-repeat;
background-size: 60%;
background-position: 65% 60%;
border-right: 1px solid #dddddd;
}
.nextbtn{
height: 40px;
width: 40px;
background: url(./images/tool_arrow_left.png);
float: left;
cursor: pointer;
background-repeat: no-repeat;
background-size: 60%;
background-position: 40% 60%;
border-right: 1px solid #dddddd;
}
.ui-accordion .ui-accordion-content{
/*height: 100px !important;
overflow-y:scroll !important;*/
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$( "#fullpageaccordion .accordion" ).accordion({autoHeight: false});
$(".breadcrumwrapper button[name=back]").addClass("backbtn");
$(".accordion").accordion({
heightStyle: "content"
});
$("#fullpageaccordion .accordion").accordion({
heightStyle: "content"
});
$(".subaccordion").accordion({
heightStyle: "content"
});
$(".deletebtn").click(function(){
console.log('on delete click');
if($("#collapsibeldivs").css("display") == "block"){
$(this).parents(".collapsibledivs").animate({height:"0px"});
}
else{
$($(this).parents(".collapsibledivs")).toggle('show');
}
});
$(".breadcrumwrapper [name=back]").click(function(){
var classApplied = $(this).attr('class');
console.log('class applied:'+classApplied);
if(classApplied == "backbtn"){
console.log('back btn clicked....');
$(".breadcrumdiv").animate({width:"95%"});
$(".fontformat").animate({width:"0%"});
$($(".breadcrumwrapper button[name=back]")[0]).removeClass("backbtn");
$($(".breadcrumwrapper button[name=back]")[0]).addClass("nextbtn");
}
else{
$(".breadcrumdiv").animate({width:"49%"});
$(".fontformat").animate({width:"45%"});
$($(".breadcrumwrapper button[name=back]")[0]).removeClass("nextbtn");
$($(".breadcrumwrapper button[name=back]")[0]).addClass("backbtn");
}
});
});
</script>
</head>
<body>
<div id="container">
<div id="accordiondiv">
<div class="accordion">
<h3>My Pages</h3>
<div>
<div class="subaccordion">
<h4>Page 1</h4>
<div>
<ul class="unorderedlist">
<li> page 1.1 </li>
<li> page 1.2 </li>
<li> page 1.3 </li>
<li> page 1.4 </li>
</ul>
</div>
<h4>Page 2</h4>
<div>
<ul class="unorderedlist">
<li> page 2.1 </li>
<li> page 2.2 </li>
<li> page 2.3 </li>
<li> page 2.4 </li>
</ul>
</div>
<h4>Page 3</h4>
<div>
<ul class="unorderedlist">
<li> page 3.1 </li>
<li> page 3.2 </li>
<li> page 3.3 </li>
<li> page 3.4 </li>
</ul>
</div>
</div>
</div>
<h3>My Drafts</h3>
<div>
<ul class="unorderedlist">
<li> page 1 </li>
<li> page 2 </li>
<li> page 3 </li>
<li> page 4 </li>
</ul>
</div>
<h3>My Public Pages</h3>
<div>
<ul class="unorderedlist">
<li> page 1 </li>
<li> page 2 </li>
<li> page 3 </li>
<li> page 4 </li>
</ul>
</div>
</div>
</div>
<div class="breadcrumwrapper">
<div class="breadcrumdiv">
</div>
<div class="fontformat">
</div>
<button name="back"/>
</div>
<div class="collapsibledivs">
<div class="collapsibleheaders">
LANE 1
<button class="deletebtn"/>
</div>
</div>
<div id="fullpageaccordion">
<div class="accordion">
<h2>LORIUM IMPSUM HEADING</h2>
<div>
<ul style="list-style-type:none;">
<li>
<label style="width:20%;">Item1:</label>
<input type="text" style="width:25%;margin-left:4%;">
<input type="text" style="width:25%;margin-left:4%;">
<input type="text" style="width:25%;margin-left:4%;">
</li>
<li><div style="min-height:20px;background:transperant;"></div></li>
<li>
<label style="width:20%;">Item2:</label>
<input type="text" style="width:25%;;margin-left:4%;">
<input type="text" style="width:25%;;margin-left:4%;">
<input type="text" style="width:25%;;margin-left:4%;">
</li>
<li><div style="min-height:20px;background:transperant;"></div></li>
<li>
<label style="width:20%;">Item3:</label>
<input type="text" style="width:25%;;margin-left:4%;">
<input type="text" style="width:25%;;margin-left:4%;">
<input type="text" style="width:25%;;margin-left:4%;">
</li>
</ul>
</div>
<h2>SIDEBAR</h2>
<div>
</div>
<h2>LANE 1</h2>
<div>
</div>
<h2>LANE 2</h2>
<div>
</div>
<h2>LANE 3</h2>
<div>
</div>
<h2>FOOTER</h2>
<div>
</div>
</div>
</div>
</div>
</body>
答案 0 :(得分：1)
我认为问题是你在整页手风琴上使用了两次实例化语法。你有：
$( "#fullpageaccordion .accordion" ).accordion({autoHeight: false});
和
$("#fullpageaccordion .accordion").accordion({
heightStyle: "content"
});
我相信第二个被丢弃了。要在实例后更改选项，您可以使用：
$("#fullpageaccordion .accordion").accordion("option", "heightStyle", "content" );
或者，您可以在第一次调用中同时设置两个属性：
$( "#fullpageaccordion .accordion" ).accordion({
autoHeight: false,
heightStyle: "content"
});
另外，autoHeight甚至是当前版本的jqueryUI中的有效选项吗？您可能只想删除第一个电话。