所以仅仅针对我的问题，我有一个单独的脚本用于一种手风琴功能，在这个元素中还有其他手风琴（jQuery UI），通过第一个手风琴的固定高度几乎看不到。
简而言之，通过切换第二个手风琴，第一个手风琴和母亲的高度必须改变，以使其看起来好像基础内容被推倒。
示例：http://jsfiddle.net/v5m4wyoo/10/
//show hidden content function
// global variables
var nav1 = $('.group'),
navHeight1 = nav1.height(),
items1 = $('.group .partner_item .trigger'),
itemsSub1 = items1.next('.toggle_container'),
itemsSubOpen1 = false,
speed1 = 400;
// global functions
var navOpen1 = function (thisSubmenu1) {
itemsSubOpen1 = true;
// get height
thisSubmenu1.css('height', 'auto');
var thisHeight1 = thisSubmenu1.height();
thisSubmenu1
.css('height', '0')
.animate({height: thisHeight1 }, speed1)
.addClass('open')
.closest('.group')
.animate({height: thisHeight1 + navHeight1+130 }, speed1);
};
var navClose1 = function () {
itemsSubOpen1 = false;
items1.next('.open')
.animate({height: 0}, speed1)
.removeClass('open');
nav1.animate({height: navHeight1+125 }, speed1);
};
// prepare css
itemsSub1.css('display', 'block');
itemsSub1.css('height', '0');
// click event
items1.click(function(event) {
// set local variables
var thisItem1 = $(this),
thisSubmenu1 = thisItem1.next('.toggle_container');
// conditional click event handling
if ( itemsSubOpen1 ) {
if ( thisSubmenu1.hasClass('open') ) {
// only close
navClose1();
} else {
// close old, than open new
navClose1();
setTimeout(function() {
navOpen1(thisSubmenu1);
}, speed1);
}
} else {
// only open
navOpen1(thisSubmenu1);
}
// prevent default
event.preventDefault();
});
答案 0 :(得分：1)
http://jsfiddle.net/v5m4wyoo/12/
我在动画结束时添加了一个高度（＆＃34; auto＆＃34;）。这就是你需要的吗？
thisSubmenu1
.css('height', '0')
.animate({height: thisHeight1 }, speed1,function() {
$(this).height("auto");
})
在打开动画结束时调用该函数并将高度重置为auto（没有视觉效果）让内部手风琴调整大小并随意扩展
修改
您可以重新排列页面中的项目，添加如下内容：
var customId=0;
$(function() {
$(".wrapper_hidden_content").each(function() {
var $this=$(this);
var $partner_item=$(this).parent().parent();
var $group=$partner_item.parent();
$this.appendTo($group);
$this.attr("id","id"+customId);
$partner_item.data("id","id"+customId);
customId++;
})
});
这会将所有.wrapper_hidden_content项放在.group中，但是你必须重新排列所有代码和CSS来处理新的javascript操作HTML，它会变得非常混乱。你必须从css中删除所有绝对位置，添加一个清除：两者都到.wrapper_hidden_content所以它们保持在下面，从组中移除高度......它很乱但可以完成
要从菜单中获取子菜单，您可以使用
thisSubmenu1 = $("#"+thisItem1.parent().parent().data('id'));
（获取已点击元素的已保存数据ID，然后在前面添加＆＃34;＃＆＃34;并使用它来搜索带有JQuery的项目）
<强>更新
我修改了你的代码以获取新的（JS生成的）HTML
http://jsfiddle.net/v5m4wyoo/20/
没有经过多少测试，但看起来像是在工作，这是代码：
//show hidden content function
// global variables
var nav1 = $('.group'),
navHeight1 = nav1.height(),
items1 = $('.group .partner_item .trigger'),
itemsSub1 = items1.next('.toggle_container'),
itemsSubOpen1 = false,
speed1 = 400;
// global functions
var navOpen1 = function (thisMenu1,thisSubmenu1) {
itemsSubOpen1 = thisMenu1;
// get height
thisSubmenu1.css('height', 'auto');
var thisHeight1 = thisSubmenu1.height();
thisSubmenu1
.css('height', '0')
.animate({height: thisHeight1 }, speed1,function() {
$(this).height("auto");
});
thisMenu1.addClass('open');
};
var navClose1 = function (thisMenu1,thisSubmenu1) {
itemsSubOpen1 = false;
thisSubmenu1.animate({height: 0}, speed1);
thisMenu1.removeClass('open');
};
// prepare css
itemsSub1.css('display', 'block');
itemsSub1.css('height', '0');
// click event
items1.click(function(event) {
// set local variables
var thisItem1 = $(this),
// thisSubmenu1 = thisItem1.next('.toggle_container');
thisSubmenu1 = $("#"+thisItem1.parent().parent().data('id'));
// parent().parent() goes from the clicked item to the containing partner_item item
// .data('id') recovers the id of the submenu we saved with $partner_item.data("id","id"+customId);
// $("#"+...) gets the submenu on the page
// conditional click event handling
if ( itemsSubOpen1 ) { // either FALSE or the opend menu JQuery object
var oldSubmenu1 = $("#"+itemsSubOpen1.parent().parent().data('id'));
if ( thisItem1.hasClass('open') ) {
// only close
navClose1(itemsSubOpen1,oldSubmenu1); // old partner_item and his submenu
} else {
// close old, than open new
navClose1(itemsSubOpen1,oldSubmenu1); // old partner_item and his submenu
setTimeout(function() {
navOpen1(thisItem1,thisSubmenu1); // partner_item and his submenu
}, speed1);
}
} else {
// only open
navOpen1(thisItem1,thisSubmenu1); // partner_item and his submenu
}
// prevent default
event.preventDefault();
});
var customId=0;
$(function() {
$(".wrapper_hidden_content").each(function() {
var $this=$(this); // the wrapper_hidden_content
var $partner_item=$(this).parent().parent(); // his partner_item (two levels outside)
var $group=$partner_item.parent(); // his group (one more level outside)
$this.appendTo($group); // move the wrapper_hidden_content up to his group
$this.attr("id","id"+customId); // set the id of the wrapper_hidden_content to a growing number
$partner_item.data("id","id"+customId); // save the id of the wrapper_hidden_content inside the partner_item
customId++; // increment the id number
})
});
以下是HTML如何通过javascript随时修改
<div class="partnerwrap">
<div class="groupwrap">
<div class="group">
<div class="partner_item first even">...</div>
<div class="partner_item odd">...</div>
<div class="partner_item even">...</div>
<div class="partner_item odd">...</div>
<div class="partner_item even">...</div>
<div id="id0" class="wrapper_hidden_content toggle_container">...</div>
<div id="id1" class="wrapper_hidden_content toggle_container">...</div>
<div id="id2" class="wrapper_hidden_content toggle_container">...</div>
<div id="id3" class="wrapper_hidden_content toggle_container">...</div>
<div id="id4" class="wrapper_hidden_content toggle_container">...</div>
</div>
<div class="group">
<div class="partner_item odd">...</div>
<div class="partner_item even">...</div>
<div class="partner_item odd">...</div>
<div class="partner_item even">...</div>
<div class="partner_item odd">...</div>
<div id="id5" class="wrapper_hidden_content toggle_container">...</div>
<div id="id6" class="wrapper_hidden_content toggle_container">...</div>
<div id="id7" class="wrapper_hidden_content toggle_container">...</div>
<div id="id8" class="wrapper_hidden_content toggle_container">...</div>
<div id="id9" class="wrapper_hidden_content toggle_container">...</div>
</div>
</div>
</div>