Question

嗨我正在尝试制作一个静态页面。在我的页面中，我有嵌套的accordion.i有重叠的孩子手风琴的问题。我是热门代码jquery.accordion.source.js中的活动函数，函数如下

function activate(el,effect){

                 $('.col-md-4 > a').attr('href','javascript:;');
                 $('.sub-col-md-4 > a').attr('href','javascript:;');

                 var paractive = $(el).parent('li.col-md-4').hasClass('active');
                 if(paractive){
                    $( ".sub-col-md-4").removeClass("active").height('');
                 }




                 var otr_pt = $( ".sub-col-md-4").parent().parent().hasClass("active");
                 if(!otr_pt){
                  $( ".sub-col-md-4" ).removeClass("active").height('');
                 }
                 var chd = $(el).parent('li').hasClass('.sub-col-md-4');
                 if(chd){//Own childe height close
                  $( ".sub-col-md-4" ).height('').css( "display", 'none' );
                 }
                 $( ".accordion li.col-md-4 > ul > li > div" ).css( "display", 'none' );
                 $( ".accordion li.col-md-4" ).height( "" );

                 $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('slow');
                 $(el).parent().find('li').removeClass("active").height('');

                 var height = $(".active > .accordion-content").innerHeight();
                 var height_li = $(el).parent('li').innerHeight();
                 var height_ul = $(".active > ul").innerHeight();
                 var total_height= height + height_li;
                 /*alert(total_height);*/
                 if($(el).parent('li').hasClass("active")){//Other childe height close
                  $( ".sub-col-md-4" ).height('');
                 }

                 $(el).parent('li').css( "height", total_height );     
                 $(el).parent('li').find(".active").not($(el).parent('li')).removeClass("faqopen");

                 if($(el).parent('li.sub-col-md-4').hasClass("active")){
                   var bashei = height + height_ul+30;
                   $(el).parent('li').parent('ul').parent().parent().parent().find('li.active').css("height", bashei );  
                   $(el).parent('li.sub-col-md-4').css("height", height_li );
                 }else if($(el).parent().hasClass('sub-col-md-4')){
                     $(el).parent('li').parent('ul').parent().parent().parent().find('li.active').css("height", total_height );  
                 }

                 $(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);

                 if(!$(el).parent('li.sub-col-md-4').hasClass("active")){//Self Close of child
                  $( ".accordion li.col-md-4 > ul > li > div" ).css( "display", 'none' );
                  $(el).parent('li.sub-col-md-4').height('');
                 }
                }

在3个孩子没有问题的情况下，4个孩子添加重叠内容检查图像

下面没有孩子输出的正常3个孩子

请帮助我，提前谢谢

Answer 1

最后我完成了我的代码

$(document).ready(function () {

$('li.parent').each( function() {
    $(this).find('a.level1').bind('click', function() { 
        var d = $(this).parent().find('.content-li');
        $(this).parent('li').toggleClass('active').siblings().removeClass('active').find('.sub-col-md-4').removeClass('active');
        if( $(d).css('display') == 'block') {
            $('.sub-content-li').css('display', 'none');    //  hide expanded sub child     
            $('li.sub-col-md-4').css('height', 97);
            //$(d).parent().removeClass('active');
            $(d).slideUp('slow');
            $('li.parent').animate( {height:165}, 700, function() {} );             
            //$('li.parent').css('background-color', '#344E5C');
            return;
        }
        $('.sub-content-li').css('display', 'none');    //  hide expanded sub child     
        $('li.sub-col-md-4').css('height', 97);

        $('li.parent > div').css('display', 'none');    //  hide expanded child     
        $('li.parent').css('height', 165);
        $('li.parent').css('background-color', '#344E5C');

        var d = $(this).parent().find('.content-li');
        height = $(d).height();
        if(parseInt(height) >0 ){   //  make sure is child div available                
            //$(d).parent().addClass('active');
            $(this).parent().css('height', height+202);
            $(this).parent().css('background','transparent');
            $(d).slideDown('slow', function() {});

        }

    });     

});

$('li.sub-col-md-4').each( function() {
    $(this).find('a.level2').bind('click', function() { 
        var d = $(this).parent().find('.sub-content-li');
            $(this).parent('li').toggleClass('active').siblings().removeClass('active');
        if( $(d).css('display') == 'block') {
            $(d).slideUp('slow', function() {
                var ph = $(this).parent().parent().parent().height();
                $(this).parent().parent().parent().parent().css('height', ph+202 );
            });
            $('li.sub-col-md-4').animate( {height:97}, 100, function() {} );    
            //$('li.sub-col-md-4').css('background-color', '#344E5C');              
            return;
        }

        $('.sub-content-li').css('display', 'none');    //  hide expanded child     
        $('li.sub-col-md-4').css('height', 97);
        //$('li.sub-col-md-4').css('background-color', '#344E5C');

        var ph = $(this).parent().parent().parent().height();
        $(this).parent().parent().parent().parent().css('height', ph+202 );


        height = $(d).height();
        if(parseInt(height) >0 ){   //  make sure is child div available                
            //$(d).addClass('')
            var ch = height+114;
            $(this).parent().css('height', ch);
            var ph = $(this).parent().parent().parent().parent().height();
            $(this).parent().parent().parent().parent().css('height', (ph+height+18) );
            $(this).parent().css('background','transparent');               
            $(d).slideDown('slow', function() {});
        }

    });

});

});

jquery中的嵌套手风琴重叠问题

1 个答案: