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. any ideas how i could accomplish this?

thanks in advance

回答1:

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
    });
});

回答2:

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');
                }
            }
        });

回答3:

You can use the callback to change this

$('#tableRowId').slideToggle( function(){
   $(this).css('display', 'table-row');
});

回答4:

This is a known bug (also here). with jQuery slideToggle. There isn't any way to use slideToggle and have it properly preserve the display style. You can apply the display style with a callback when the animation completes, but that may not achieve the effect you desire.

回答5:

just add this code to callback function

$(this).css('display','');

回答6:

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.

来源：https://stackoverflow.com/questions/1266221/jquery-slidetoggle-display-type

标签

jquery

slidetoggle