2012-02-13 9 views
0

クリックすると2つだけ表示され、もう1つをクリックすると2つ表示されます再現...繰り返す!以下のサブカテゴリは表示されません。スライドをクリックするとdivの切り替えができなくなります(具体的には9)

これはFirefox(Safari)とSafari(IE(9)では動作しません)。私はそれが実際に8で動作すると思うが、私はそこにそれをやり直すためにもう8を持っていない。すべてstyle="display:hidden;"が間違っているの

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="kin-js/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 

jQuery(".toggle_container").hide(); 

jQuery("li.trigger").click(function(){ 
jQuery(".toggle_container").hide(); 
jQuery(this).toggleClass("active").next().slideToggle("slow"); 
}); 

}); 
</script> 

</head> 

<body> 

<li style="padding: 4px 0 4px 0; list-style:none;" class="trigger"><a href="javascript:void();"><strong>One (1)</strong></a></li> 
<div class="toggle_container" style="display:hidden;"> 
- <a href="#">1 sub 1</a><br> 
- <a href="#">1 sub 2</a><br> 
- <a href="#">1 sub 3</a><br> 
</div> 

<li style="padding: 4px 0 4px 0; list-style:none;" class="trigger"><a href="javascript:void();"><strong>Two (2)</strong></a></li> 
<div class="toggle_container" style="display:hidden;"> 
- <a href="#">2 sub 1</a><br> 
- <a href="#">2 sub 2</a><br> 
- <a href="#">2 sub 3</a><br> 
</div> 

<li style="padding: 4px 0 4px 0; list-style:none;" class="trigger"><a href="javascript:void();"><strong>Three (3)</strong></a></li> 
<div class="toggle_container" style="display:hidden;"> 
- <a href="#">3 sub 1</a><br> 
- <a href="#">3 sub 2</a><br> 
- <a href="#">3 sub 3</a><br> 
</div> 

</body> 
</html> 
+0

あなたのリンクにvoid()を避けてください。 jQueryを使用しているので、event.preventDefault()を使用し、リンクにclickイベントをアタッチします。 – j08691

答えて

0

フリスト:

は、ここに私のコードです。 style="display:none;"を使用します。

IEが異常終了しているため、マークが無効です。 を使用せずにliを使用することはできません。divulに含めることはできません。つまり、liの兄弟として使用することはできません。

マークアップは李にnext()を呼び出して台無しにされているので、それは予想通りliの代わりdivを切り替えているので、IEは、次のliの要素を返しています。

IEでもうまく動作するマークアップを修正しました。

関連する問題