如何在 display:none 和 display:inline 之间使用 slideToggle？

Question

我正在尝试使用 slideToggle() 函数将“越来越少”的行为应用于包含“.more”类的段落：

html代码：

<p class="more">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut...
    <span class="HiddenText" style="display: none;">
        aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
        voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
        id est laborum.
    </span>
    <a class="readmore" href="" style="display: block;">show more</a>
</p>

这是我的 JS 代码：

$(document).ready(function() {    
        
    $('.readmore').click(function(){

        var text = $(this).text() == 'show more' ? 'show less' : 'show less';
        $(this).text(text);

        $(this).prev().slidetoggle(); 
        // here the problem 
        // $(this).prev() eq $('.hiddenText')
        // slideToglle transforme "display:none" property to "display:inline-block" 

        return false;
    });
});

我将 slideToggle 函数应用于 span.hiddenText 元素，但是这个函数将“display: none”转换为“display: inline-block”，我想在“display: none”和“display: inline”之间切换。

点击行为：使用 slideToggle() 函数：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

onclick 行为：使用 toggle() 函数：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

问题：slideToggle 函数在段落中创建返回线。

通常，由于我使用了 display 属性为内联的 span，因此 slideToggle 必须使用 display:inline 而不是 display:inline-block。

注意：当我使用 toggle() 代替 slideToggle() 时，它工作得很好（显示：无显示：内联）

如何在 display:none 和 display:inline 之间使用 slideToggle？

Answer 1

试一试：

HTML：

<p>Lorem ipsum dolor sit amet, has at tractatos voluptaria. Pri ne ipsum primis apeirian, mel an menandri instructior. <span class="hide"> Cum quando nominati iracundia te. His tollit eripuit lucilius at, mei quis volutpat deseruisse ex, dicunt habemus iudicabit et qui. Ad voluptua insolens mel, ei enim esse tamquam nam.</span><a id="clickme" href="#">Read more...</a>
</p>

jQuery：

$(function () {
    $("#clickme").click(function () {
        $(".hide").slideToggle("slow", function () {
            $('span.hide').toggleClass('show');
        });
    });
});

CSS：

.hide {
    display: none;
}
.show {
    display: inline;
}

阅读更多链接只是一个通用的占位符链接，无处可去，但单击它会触发 jQuery，其中slideToggles 文本，然后触发一个函数以将类替换为显示类，因此显示应该是设置为inline 而不是inline-block。

我有一个可用的小提琴，但该网站目前不允许我保存以分享。

Answer 2

你可以使用回调函数来改变样式。

$('.readmore').click(function(){
    $(this).prev().slideToggle("fast", function()
    {
        if(this.style.display !== "none")
            this.style.display = "inline";
    });
});

希望对你有帮助。