[英]jQuery toggle changes element's width? I don't want it to
I currently have a table that has a width of 94%, and the following toggle set to it: 我目前有一个宽度为94%的表,并为其设置了以下切换:
$(document).ready(function(){
$("#moreinfo").hide();
$("#toggleinfo").click(function () {
$("#moreinfo").toggle('normal');
});
});
It toggles fine, but as soon as you toggle, the width goes really small and I have no idea why. 它切换得很好,但是一旦切换,宽度就会变得很小,我也不知道为什么。 If I remove the
hide()
it's the right width, but again as soon as I start toggling it, the width automatically resizes. 如果删除
hide()
它的宽度是正确的,但是一旦我开始切换它,宽度就会自动调整大小。
Just tried the following CSS too: 也尝试过以下CSS:
#moreinfo { width: 94% !IMPORTANT; }
Edit: it seems to completely remove any width applied through CSS when I toggle it 编辑:当我切换它时,似乎完全删除了通过CSS应用的任何宽度
Edit2: Wrapping it inside another div works! Edit2: 将其包装在另一个div内有效! Not ideal, but not a bad solution I guess.
不理想,但我猜这不是一个糟糕的解决方案。
Any way to stop this please? 有什么办法可以阻止这个吗?
The jQuery toggle()
function sets your target element ( '#moreinfo'
in this case) to display: block
. jQuery
toggle()
函数将目标元素(在这种情况下为'#moreinfo'
)设置为display: block
。 It's just a guess without seeing your CSS or HTML, but I'm picking that the table, when having its display property changed, is being positioned or laid out incorrectly. 只是没有看到CSS或HTML的猜测,但是我选择的是更改表的display属性后,表的位置或布局不正确。
You may be able to work around this by wrapping your moreinfo element in another div with display: inline
or position: relative
? 您可能可以通过以下方式解决此问题:将moreinfo元素包装在另一个带有
display: inline
或position: relative
?的div中。 But that's just a guess. 但这只是一个猜测。 Do different browsers show the same result?
不同的浏览器显示相同的结果吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.