我不是Javascript方面的专家,而且是自学成才的,我想这可能是Javascript 101,但我一定错过了那节课。
我已经想出了以下代码,当我从表中单击行时,表中会出现7行(因此每隔一行)。我知道它不整洁,但我对自己很满意,它实际上在离线预览中起到了作用。然而,当我上传我的网站时,默认情况下会显示所有行,我必须单击上面的行才能使它们消失。默认情况下,它们应该全部隐藏。
感谢
这是代码:
<script>
$('.openRow1').click(function(){
$('.hiddenRow1').toggle();
})
</script>
<script>
$('.openRow2').click(function(){
$('.hiddenRow2').toggle();
})
</script>
<script>
$('.openRow3').click(function(){
$('.hiddenRow3').toggle();
})
</script>
<script>
$('.openRow4').click(function(){
$('.hiddenRow4').toggle();
})
</script>
<script>
$('.openRow5').click(function(){
$('.hiddenRow5').toggle();
})
</script>
<script>
$('.openRow6').click(function(){
$('.hiddenRow6').toggle();
})
</script>
<script>
$('.openRow7').click(function(){
$('.hiddenRow7').toggle();
})
</script>
这里有一个更好的方法:http://jsfiddle.net/8fwdf/
DOM:
<div class="openRow">Open</div>
<div class="hiddenRow">Hidden</div>
<div class="openRow">Open</div>
<div class="hiddenRow">Hidden</div>
...
JS:
$('.hiddenRow').hide();
$('.openRow').click(function(){
$(this).next('.hiddenRow').toggle();
})
你不需要为每个人单独绑定。您可以使用jquery选择器来选择并在所有元素上应用单个绑定。我在这个例子中使用了div,但您可以将同样的东西应用于其他元素类型。
请注意,我不知道您的DOM是什么样子的,所以$(this).next()
部分可能需要调整。也许你可以弄清楚这一部分,或者发布你的DOM,我可以更新。
此外,您可以执行此css并删除hide()
行:
.hiddenRow {
display: none;
}
要使此代码更加整洁,可以将其替换为:
<script>
for(var i=1; i<=7; i++) {
$('.openRow'+i).click(function(){
$('.hiddenRow'+i).toggle();
});
}
</script>
您可以这样做:
<script>
for(var i=1; i<=7; i++) {
$('.openRow'+i).click(function(){
$('.hiddenRow'+i).toggle();
}).css('visibility', 'hidden'); //this will make them invisible, but
} //the elements will still take up that
//same amount of space. to completely remove
//use *.css('display', 'none');
</script>
jQuery是DOM中数据的实时表示,因此在任何时候更改jQuery元素,网页都会随之更改。