Question

http://jsfiddle.net/EWH8E/

我有一些页面包含隐藏的内容，这些内容在“勾选”复选框时显示，而在“未勾选”时再次隐藏。一切都在Chrome和FF中完美运行，但我要么总是显示或隐藏内容，但复选框在IE中不起作用。我正在使用Ie8，但也尝试了9，同样的事情发生了。关于如何让它工作的任何建议？我在HTML头部分中包含了以下内容，以对抗文章元素的使用。

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

现在这里是PHP代码

echo "<div class=\"resultsContainer\">";

回声“ 最新结果

            <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>";

和CSS

.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 }

Answer 1

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

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

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

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

或者，如果您只是将这些元素设置为display: none;，那么您可以

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

尽管这些答案看似相似，但它们却截然不同。一定要知道区别。

在IE中使用复选框扩展/折叠div

1 个答案: