我有以下 html:
<ul class="scr">
<li class="scr">
<input type="checkbox" class="chkscr"/>
<h3>Item Name</h3>
<div class="scr">Contents</div>
</li>
....
</ul>
以及以下 jQuery:
//Set initial state of each scr section
$('.chkscr input, input.chkscr').each(function() {
chkSCR_Click($(this));
});
//Setup click event
$('.chkscr input, input.chkscr').click(function() {
chkSCR_Click($(this));
});
//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
if (ctl.attr('checked')) {
ctl.parents('li.scr').find('div.scr').stop().show();
}
else {
ctl.parents('li.scr').find('div.scr').stop().hide();
}
}
我的问题是,当我切换最后一个 li 元素以显示时,h3 元素内容会消失,直到我单击页面上的其他位置,或上下滚动页面以导致浏览器重新绘制窗口的该部分。例如,我在 Opera 中没有得到这种行为,即使在 IE 中,这种行为也只发生在最后一个 li 元素上,所以我很确定这是 IE 的怪癖,而不是我的代码。我可以通过 jquery/javascript 执行任何解决方法来强制它重新绘制 h3 元素吗?
最佳答案
我无法复制。我对您的代码进行了一些重构:
//Set initial state of each scr section
$('input.chkscr').each(function() {
chkSCR_Click($(this));
});
//Setup click event
$('input.chkscr').click(function() {
chkSCR_Click($(this));
});
//Toggle corresponding scr section for the checkbox
function chkSCR_Click(ctl) {
if (ctl.attr('checked')) {
ctl.siblings('div.scr').stop().show();
}
else {
ctl.siblings('div.scr').stop().hide();
}
}
并在这里设置了一个 fiddle :http://jsfiddle.net/4KxHm/但我的想法是(我很可能是错的)在你的实际标记中的某个地方有一个错误。
关于javascript - 强制刷新浏览器中的部分页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2876734/