jquery slideToggle() not “sliding” in but out

问题

Heres the code:

$('span.faqanswer').hide();
$('strong.faqlink').css('cursor','pointer').click(function(){
    $(this).parent().find('span.faqanswer').slideToggle();
});

If you click the span.faqlink it just toggles but not slidetoggles. if you click again it slidetoggles. this happens in any process. the downslide just toggles and the upslide slidetoggles...

回答1:

jQuery's animation relies upon the element having height and width. Since span is an inline element, it does not have these dimensions set or settable, so animations won't work.

It works while sliding up because the display is set to inline-block and it can be animated.

I would suggest you to wrap the span in a div and then slide the div instead if it is possible to change your markup.

Working demo - http://jsfiddle.net/ShankarSangoli/yTeAY/

回答2:

Try $('span.faqanswer').slideUp(); instead of $('span.faqanswer').hide(); first.

http://jsfiddle.net/RbpAq/

Or give a style to span.faqanswer element display:none first and remove $('span.faqanswer').hide();

http://jsfiddle.net/tFFX6/1/

回答3:

If you're trying to have an element slide in horizontally, don't use slideToggle(). Use animate().

http://api.jquery.com/slideToggle/

The .slideToggle() method animates the height of the matched elements. This causes lower parts of the page to slide up or down, appearing to reveal or conceal the items.

Otherwise, do as @ShankarSangoli says and wrap the in-line element.

来源：https://stackoverflow.com/questions/9502055/jquery-slidetoggle-not-sliding-in-but-out