Question

我有一个动态创建的jquery手风琴（详见下面的屏幕截图）。

手风琴的最后一个小组与其他小组不一致有什么问题？

enter image description here

我在我的问题中简要介绍了我的代码部分

第一个代码部分

我用于手风琴的唯一 css

第二个代码部分

detailTable 是手风琴动态放置的主要内容
htmlTableWarning，htmlTableError，htmlTableInfo 表格在div中用于创建合适的手风琴。

我的css

.acc_panel{
/*border: 1px solid #d6d6d6;*/
overflow:hidden;
}
.acc_trigger {
padding: 0;    margin: 0 0 2px 0;
background: url(../images/thbg.jpg);
height: 26px;    line-height: 22px;
width: 100%;
font-size: 1.2em;
color:#FFFFFF;
font-weight: normal;
float: left;
overflow:hidden;
}
.acc_trigger img{
padding: 5px 0 0 6px;
}
.acc_trigger a{
color: #FFFFFF;
text-decoration: none;
width: 99%; 
padding: 0 0 0 6px; 
 }
.acc_trigger a:hover {
color: #ccc;
}
.acc_container {
margin: 0 0 2px; padding: 0;

overflow: hidden;
font-size: 1.2em;
width: 100%;
clear: both;
background: #ffffff;

-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
/*
.acc_container .block {
padding: 20px;
}*/

.recomendationsTable{
width:100%;overflow:hidden;
}
.recomendationsTable tr{
border:#2F5882 1px solid;
}
.recomendationsTable tr th{
color :#ffffff;
background-color: #93A8BF;
}
.recomendationsTable tr .odd{
color :#FFFFFF;
background-color: #8EA4BB;
border:#2F5882 1px solid;
}
.recomendationsTable tr .even{
color :#2F5882;
background-color: #EDF1F5;
border:#2F5882 1px solid;
}

我的动态手风琴创作

$('#detailTable').empty();
$('<div>')
.attr('id','healthCheckSpan')
.html('<div class="titleBlue" width="100%">Health Check Summary</div>'+
        '<table width="100%">'+
                '<tr >'+
                    '<td align="left" width="100%">'+

'<div class="container">'+
'<div class="acc_panel">'+
'<div class="acc_trigger" ><img src="/csm/view/include/images/erroricon.png"/><a   href="#" >Error</a></div>'+
'<div class="acc_container">'+
'<div class="block">'+htmlTableError+
'</div></div>'+

'<div class="acc_trigger" ><img src="/csm/view/include/images/warningicon.png"/><a href="#" >Warning</a></div>'+
'<div class="acc_container">'+
'<div class="block">'+htmlTableWarning+
'</div></div>'+

'<div class="acc_trigger" ><img src="/csm/view/include/images/infoicon.png"/><a href="#" >Info</a></div>'+
'<div class="acc_container">'+
 '<div class="block">'+htmlTableInfo+
 '</div></div>'+
                    '</td>'+
                '</tr>'+

        '</table>'+
    '</div>')       
.appendTo('#detailTable').delay(10).queue(function(){
    //Set default open/close settings
    $('.acc_container').hide(); //Hide/close all containers
    $('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

    //On Click
    $('.acc_trigger').click(function(){
        if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
            $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
            $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
        }
        return false; //Prevent the browser jump to the link anchor
    });       
});

容器

<div id="detailTable" style="width:100%;">

</div>

更新

从服务器收到响应后调用以下函数，该服务器填充htmlTableWarning，htmlTableError和htmlTableInfo表

function(xmldata)
      {
            xml=$(xmldata);
            warningtr=0;
            errortr=0;
            infotr=0;
            htmlTableWarning='<table class="recomendationsTable"><tr><th align="left">Recommendation(s)</th></tr>';
            htmlTableError='<table class="recomendationsTable"><tr><th align="left">Actions</th></tr>';
            htmlTableInfo='<table class="recomendationsTable"><tr><th align="left">Actions</th></tr>';

            $(xml).find('Response').each(function(){
                  var cid = $(this).find('cfgId').text();
                  if(cid==cfgid) {   
                        var newXmlString = $(xml).find('recommendations').text();
                        var newXml = $("<div/>").html(newXmlString);
                        var ruleseverity=$(newXml).find('severity').text();

                        if(ruleseverity=="warning")  {
                          /*var rulename=$(newXml).find('name').text();
                          var rulecategory=$(newXml).find('category').text();
                          var ruleresult=$(newXml).find('ruleEvalResult').text();*/
                          var ruleactionresult=$(newXml).find('actionResult').text();
                          if(warningtr%2==0)
                              htmlTableWarning+=('<tr class="even"><td>'+ruleactionresult+'</td></tr>');
                          else
                              htmlTableWarning+=('<tr class="odd"><td>'+ruleactionresult+'</td></tr>');
                          warningtr++;
                        }
                        else 
                            htmlTableWarning+=('<tr class="even"><td>No Recommendations</td></tr>');

                        if(ruleseverity=="error")
                        {
                            var ruleactionresult=$(newXml).find('actionResult').text();
                            if(errortr%2==0)
                                htmlTableError+=('<tr class="even"><td>'+ruleactionresult+'</td></tr>');
                            else
                                htmlTableError+=('<tr class="odd"><td>'+ruleactionresult+'</td></tr>');
                            errortr++;
                        }
                        else 
                            htmlTableError+=('<tr class="even"><td>No Recommendations</td></tr>');

                        if(ruleseverity=="information")
                        {
                            var ruleactionresult=$(newXml).find('actionResult').text();
                            if(infotr%2==0)
                                htmlTableInfo+=('<tr class="even"><td>'+ruleactionresult+'</td></tr>');
                            else
                                htmlTableInfo+=('<tr class="odd"><td>'+ruleactionresult+'</td></tr>');
                            infotr++;
                        }
                        else 
                            htmlTableInfo+=('<tr class="even"><td>No Recommendations</td></tr>');
                  }
            });
            htmlTableWarning+="</table>";
            htmlTableError+="</table>";
            htmlTableWarning+="</table>";
      }

Answer 1

嗯，这就是问题所在：

htmlTableWarning+="</table>";
htmlTableError+="</table>";
htmlTableWarning+="</table>";

第三个应该是htmlTableInfo我想。

不均匀的div造型

1 个答案: