[英]JQuery slideToggle display type
I'm using a jQuery slideToggle to show a hidden table row but it sets the display style to block and I need to to display table-row. 我正在使用jQuery slideToggle来显示隐藏的表格行,但它将显示样式设置为阻止,我需要显示表格行。 any ideas how i could accomplish this? 任何想法我怎么能做到这一点?
thanks in advance 提前致谢
I figured out a solution to this problem - check if the display has been set to block (if the element has been toggled to be shown) and if so set to desired display type. 我找到了解决这个问题的方法 - 检查显示是否已设置为阻止(如果元素已被切换显示),如果设置为所需的显示类型。
$('a.btn').on('click', function() {
$('div.myDiv').slideToggle(200, function() {
if ($(this).css('display') == 'block') $(this).css('display', 'table-row'); // enter desired display type
});
});
inorganik's solution is almost working. inorganik的解决方案几乎正常。 But you also need to set the step
callback to change block
to table-row
. 但是您还需要设置step
回调以将block
更改为table-row
。
$('row-selector-here').slideToggle({
duration: 'fast',
step: function() {
if ($(this).css('display') == 'block') {
$(this).css('display', 'table-row');
}
},
complete: function() {
if ($(this).css('display') == 'block') {
$(this).css('display', 'table-row');
}
}
});
You can use the callback to change this 您可以使用回调来更改此设置
$('#tableRowId').slideToggle( function(){
$(this).css('display', 'table-row');
});
This is a known bug (also here ). 这是一个已知的错误 (也在这里 )。 with jQuery slideToggle
. 用jQuery slideToggle
。 There isn't any way to use slideToggle
and have it properly preserve the display style. 没有任何方法可以使用slideToggle
并正确保留显示样式。 You can apply the display style with a callback when the animation completes, but that may not achieve the effect you desire. 您可以在动画完成时使用回调应用显示样式,但这可能无法达到您想要的效果。
只需将此代码添加到回调函数即可
$(this).css('display','');
Simply you can default it in css to 只需将其默认为css即可
.block { display: table }
and then when loading the page you can slide it up 然后在加载页面时,您可以将其向上滑动
$(document).ready(function () {
$('.btn').click(function(){
$('.block').slideToggle();
})
$('.block').slideUp();
});
and next time it slides down it'll have display:table. 下次它向下滑动它将显示:table。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.