调整jquery Accordion小部件中面板的高度
我正在使用jqueryaccordion小部件。我希望小部件中窗格的高度根据其内容进行调整。为此，我尝试使用“setter”方法来设置选项，并且在实例化时，我尝试设置“heightStyle”的值。它甚至适用于一个accordio小部件实例，但对于我添加的另一个实例，它根本不起作用 除了覆盖手风琴css，还有其他方法调整高度吗？调整jquery Accordion小部件中面板的高度,jquery,html,css,Jquery,Html,Css,我正在使用jqueryaccordion小部件。我希望小部件中窗格的高度根据其内容进行调整。为此，我尝试使用“setter”方法来设置选项，并且在实例化时，我尝试设置“heightStyle”的值。它甚至适用于一个accordio小部件实例，但对于我添加的另一个实例，它根本不起作用 除了覆盖手风琴css，还有其他方法调整高度吗？ 在我的例子中，对于“fullpageaccordion”div中的accordion，对于accordion中每个第一个元素的所有元素，其高度都是相同的，尽管我在实例化
在我的例子中，对于“fullpageaccordion”div中的accordion，对于accordion中每个第一个元素的所有元素，其高度都是相同的，尽管我在实例化时将heightStyle作为内容 请在下面找到我的代码：
<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>
#容器{
宽度：99%；
边框：1px实心#ff00ff；
填充物：5px 5px 5px；
最小高度：750px；
}
#手风琴师{
位置：相对位置；
宽度：30%；
边框：1px实心#dddddd；
浮动：左；
}
.折叠式潜水艇{
位置：相对位置；
宽度：69%；
边框：1px纯绿色；
最小高度：70px；
浮动：左；
右侧填充：0.7%；
}
.可折叠标题{
背景：#efef；
宽度：100%；
浮动：左；
左侧填充：10px；
}
#全页手风琴{
宽度：69%；
边框：1px纯蓝色；
浮动：左；
}
#全页手风琴，手风琴h2{
颜色：rgb（145186222）；
背景：rgb（242242）；
}
.deletebtn{
浮动：对；
宽度：30px；
高度：30px；
左边框：1px实心#dddddd；
光标：指针；
背景图片：url（./images/minus.png）；
背景重复：无重复；
背景大小：100%；
背景位置：中心；
}
.无序名单{
列表样式类型：无；
}
面包屑{
背景：#ffffff；
宽度：49%；
最小高度：40px；
浮动：左；
边框：1px纯红；
}
.fontformat{
背景：#dddddd；
宽度：45%；
最小高度：40px；
浮动：左；
边框：1px纯红；
}
.面包屑包装纸{
位置：相对位置；
宽度：69%；
边框：1px纯绿色；
最小高度：0px；
浮动：左；
右侧填充：0.7%；
}
.backbtn{
高度：40px；
宽度：40px；
背景：url（./images/tool\u arrow\u right.png）；
浮动：左；
光标：指针；
背景重复：无重复；
背景大小：60%；
背景位置：65%60%；
右边框：1px实心#dddddd；
}
.nextbtn{
高度：40px；
宽度：40px；
背景：url（./images/tool\u arrow\u left.png）；
浮动：左；
光标：指针；
背景重复：无重复；
背景大小：60%；
背景位置：40%60%；
右边框：1px实心#dddddd；
}
.ui手风琴.ui手风琴内容{
/*高度：100px！重要；
溢出y：滚动！重要*/
}
$（文档）.ready（函数（）{
$（#fullpageaccordion.accordion”）.accordion（{autoHeight:false}）；
$（“.breadcrumwrapper按钮[name=back]”）.addClass（“backbtn”）；
$（“手风琴”）。手风琴({
高度样式：“内容”
});
$（“整页手风琴.手风琴”）.手风琴({
高度样式：“内容”
});
$（“.subaccordion”）.手风琴({
高度样式：“内容”
});
$（“.deletebtn”）。单击（函数（）{
log（'on delete click'）；
if（$（“#collapsebeldivs”）.css（“显示”）=“块”）{
$（this.parents（“.collapsabledivs”）.animate（{height:“0px”}）；
}
否则{
$（$（this.parents（.collapsabledivs））.toggle（'show'）；
}
});
$（“.breadcrumwrapper[name=back]”。单击（函数（）{
var classApplied=$（this.attr（'class'）；
log（'应用的类：'+应用的类）；
如果（类应用==“backbtn”）{
console.log（'点击返回btn…）；
$（“.breadcrumdiv”）.animate（{宽度：“95%”）；
$（“.fontformat”）.animate（{width:“0%”}）；
$（$（“.breadcrumwrapper按钮[name=back]”[0]）.removeClass（“backbtn”）；
$（$（“.breadcrumwrapper按钮[name=back]”[0]）.addClass（“nextbtn”）；
}
否则{
$（“.breadcrumdiv”）.animate（{width:”49%“}）；
$（“.fontformat”）.animate（{width:“45%”}）；
$（$（“.breadcrumwrapper按钮[name=back]”[0]）.removeClass（“nextbtn”）；
$（$（“.breadcrumwrapper按钮[name=back]”[0]）.addClass（“backbtn”）；
}
});
});
我的页面
第1页
- 第1.1页
- 第1.2页
- 第1.3页
- 第1.4页
$( "#fullpageaccordion .accordion" ).accordion({autoHeight: false});
$("#fullpageaccordion .accordion").accordion({
heightStyle: "content"
});
$("#fullpageaccordion .accordion").accordion("option", "heightStyle", "content" );
$( "#fullpageaccordion .accordion" ).accordion({
autoHeight: false,
heightStyle: "content"
});