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. 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. But you also need to set the step
callback to change block
to 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).css('display','');
Simply you can default it in css to
.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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.