Question

当我点击One（1）时它只隐藏了Two（2），当我再次点击One（1）时，Two（2）重新出现......重复！它没有拉出低于一（1）

的子类别

这适用于firefox和safari，但不适用于IE（9）。我认为它实际上是在8中工作，但我没有8再在那里重试。

这是我的代码：

<!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>

Answer 1

所有style="display:hidden;"的第一个错误。使用style="display:none;"。

您的商标无效，因为IE失败了。如果不使用li，您就不能拥有ul，而且div内也不能ul，但不能用作li的兄弟。

由于标记在li上调用了next()，IE会返回下一个li元素，因此它会按预期切换li而不是div。

修复标记，它也可以在IE中正常工作。

在li点击滑动切换div不再在IE中工作（即9具体）

1 个答案: