2011-08-04 5 views
1

私は動的に作成しているjqueryアコーディオンを持っています(詳細は以下のスクリーンショットを参照)。不均一なdivスタイル

最後のパネルがアコーディオンの他の人に不均一であることは何ですか?

enter image description here

私は私の質問に私のコードセクションについての簡単な説明を与えている

第一のコードセクション

ザ・私は私のアコーディオンのために使用していますのみCSS

第2コードセクション

  1. detailTableはアコーディオンを
  2. htmlTableWarning、htmlTableError、htmlTableInfoテーブルが適切なアコーディオンを作成するために、DIV内部ここで使用される動的に配置されるメインの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に移入され、htmlTableErrorhtmlTableInfoテーブル

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>"; 
     } 
+0

あなたは質問を忘れてしまったと思います。 –

+0

@ニコラ:最後のパネルはアコーディオンの他の人に不均一ですが、何が問題なのですか?私はこれを最初から言いました – abi1964

+0

'htmlTableWarning'はどうなっていますか? –

答えて

2

まあされ、ここで問題です:

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

三つ目は、私は考えhtmlTableInfoする必要があります。

+0

を参照してください。このような愚かな間違いLOL:D – abi1964

+0

を確認していただきありがとうございます。こんにちは、[このリンク](http://jsfiddle.net/fWACZ/2/)に境界線付きのアコーディオンのためのより良いCSSを更新できますか? – abi1964

関連する問題