私は動的に作成しているjqueryアコーディオンを持っています(詳細は以下のスクリーンショットを参照)。不均一なdivスタイル
最後のパネルがアコーディオンの他の人に不均一であることは何ですか?
私は私の質問に私のコードセクションについての簡単な説明を与えている
第一のコードセクション
ザ・私は私のアコーディオンのために使用していますのみCSS
第2コードセクション
- detailTableはアコーディオンを
- 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
に移入され、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>";
}
あなたは質問を忘れてしまったと思います。 –
@ニコラ:最後のパネルはアコーディオンの他の人に不均一ですが、何が問題なのですか?私はこれを最初から言いました – abi1964
'htmlTableWarning'はどうなっていますか? –