展開/摺疊使用複選框DIV在IE

http://jsfiddle.net/EWH8E/展開/摺疊使用複選框DIV在IE

我有包括隱藏當複選框被「選中」和隱藏的透露一些內容的網頁時再「取消選中」。一切都在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 }

來源

2014-02-17 DJC

我們需要看到實際的HTML輸出。的jsfiddle？ –

http://jsfiddle.net/EWH8E/ – DJC

：如果IE瀏覽器版本低於9 –

的:before選擇是在9之前的IE版本中不支持。

對於瀏覽器支持，最好的選擇是使用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(); 
});

儘管這些答案看起來相似，但有很大的不同。一定要知道區別。

來源

2014-02-17 22:17:17 khuderm

展開/摺疊使用複選框DIV在IE

回答

相關問題