Php 使用IE中的复选框展开/折叠div

我有一些包含隐藏内容的页面，当复选框被“勾选”时显示，当“取消勾选”时再次隐藏。在Chrome和FF中，一切都很完美，但我要么总是显示内容，要么隐藏内容，但在IE中，复选框不起作用。 我正在使用Ie8，但也尝试过IE9，同样的情况也发生了。关于如何让它工作，有什么建议吗？我在HTML标题部分包含了以下内容，以反对使用article元素

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

早于9的IE版本不支持：before选择器

浏览器支持的最佳选择是使用javascript

您所要做的就是将事件侦听器绑定到复选框。因此，当您单击它时，您可以直接更改宽度和高度，或者只使用toggleClass

或者，如果您只是将这些元素设置为显示：无；那你就可以了

$( "YOUR CHECKBOX ID OR CLASS" ).change(function() { 
    $( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggle();
});

---

虽然这些答案看起来很相似，但却大不相同。一定要知道区别。

我们需要查看实际的HTML输出。JSFIDLE？：如果IE版本低于9right，则checked不可用，您建议如何解决此问题？Jquery将是获得IE8支持的途径

            <article class=\"small\">

            <table class=\"results\">";



$query2=$database->query("SELECT team_name, team_score, opposition_score,
opposition_name from results_a ORDER BY updated DESC LIMIT 0, 5");
$i=0;
while ($row2=$query2->fetch(PDO::FETCH_NUM)) {
echo ($i %2 == 0)? "<tr class=\"stripe\">" : "<tr class=\"nostripe\">";
printf ("<td>%s<td class=\"small\">%s<td class=\"small\">%s<td>%s</tr>", 
$row2[0],$row2[1], $row2[2], $row2[3]);
$i++;
}
echo "</table>";
echo "</article>";
echo "</div>";

.resultsContainer  article {
background:white ; 
overflow:hidden ; 
height: 0px ; 
position: relative ; 
z-index:10}

.resultsContainer  input:checked ~ article.small {
height:100% ; 
width: 100% }

.results {text-align: center ; 
table-layout:fixed ; 
margin-left: 0 ; 
margin-right: 0 ; 
padding-top:0.7em ; 
width: 65% ; 
color:#0431B4 }

$( "YOUR CHECKBOX ID OR CLASS" ).change(function() { 
    $( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggleClass( "ACTIVE CLASS NAME" );
});

$( "YOUR CHECKBOX ID OR CLASS" ).change(function() { 
    $( "ID OR CLASS OF ITEMS YOU WANT TO DISPLAY" ).toggle();
});