在试图建立一个网页,我可以过滤作业使用隐藏/显示功能的类型和办公室,我发现,如果一个元素是隐藏的,那么元素的元素下方被“告知”隐藏,它实际上并不隐藏。换句话说,只有在显示实际元素时才隐藏起作用。元素不会隐藏
下面是代码,复制,隐藏办公室2,然后隐藏开发商,再展办公室2一次。内办公2.
开发商(其中“应该”被隐藏)显示是否有办法解决?看起来jquery也会隐藏“子”元素,但事实并非如此。
<input type="checkbox" id=office1 name="test" class="link1" />Office 1<BR>
<input type="checkbox" name="office2" checked='true' class="link2"/>Office 2<BR>
<input type="checkbox" name="office3" checked='true' class="link3" />Office 3<BR>
<input type="checkbox" name="developer" checked='true' class="link4" />Developer<BR>
<input type="checkbox" name="receptionist" checked='true' class="link5" />Receptionist<BR>
<input type="checkbox" name="manager" checked='true' class="link6" />Manager<BR>
<table border='1'>
<tr>
<td class="toggle-item-link1"><B>Office 1</B><HR>
<div class="toggle-item-link6"><BR>Manager</div>
<div class="toggle-item-link6"><BR>Manager</div>
<div class="toggle-item-link6"><BR>Manager</div>
</td>
</tr>
<tr >
<td class="toggle-item-link2"><B>Office 2</B><HR>
<div class="toggle-item-link4"><BR>Developer</div>
<div class="toggle-item-link4"><BR>Developer</div>
<div class="toggle-item-link6"><BR>Developer</div>
<div class="toggle-item-link5"><BR>Receptionist</div>
</td>
</tr>
<tr>
<td class="toggle-item-link3"><B>Office 3</B><HR>
<div class="toggle-item-link4"><BR>Developer</div>
<div class="toggle-item-link4"><BR>Developer</div>
<div class="toggle-item-link5"><BR>Receptionist</div>
</td>
</tr>
<td>
</td>
</tr>
</table>
<script>
$(document).ready(function() {
$('[class^=link]').click(function() {
if ($(this).attr("checked")) {
var $this = $(this);
var x = $this.attr("className");
//when 'checked'
$('.toggle-item-' + x).show(1000);
return;
}
//when 'unchecked'
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).hide(1000);
});
});
</script>
演示在这里 - http://jsfiddle.net/yFm84/ – 2010-07-24 20:11:00