Question

所以仅仅针对我的问题，我有一个单独的脚本用于一种手风琴功能，在这个元素中还有其他手风琴（jQuery UI），通过第一个手风琴的固定高度几乎看不到。

简而言之，通过切换第二个手风琴，第一个手风琴和母亲的高度必须改变，以使其看起来好像基础内容被推倒。

//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();

                });

Answer 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>

从手风琴（jQuery）调整div的高度

1 个答案: