Question

我试图使用slideToggle（）函数来应用＆＃34;越来越少＆＃34;对包含＆＃34; .more＆＃34;的段落的行为。 class：

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元素，但此函数变换＆＃34; display：none＆＃34; to＆＃34; display：inline-block＆＃34;，我想在＆＃34; display：none＆＃34;之间切换。和＆＃34;显示：内联＆＃34;。

onclick行为：使用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函数在段落中创建一个返回行。

通常情况下，因为我使用了展示属性为内联的span，所以slideToggle必须使用display：inline而不是display：inline-block。

注意：当我使用toggle（）代替slideToggle（）时，它完美地工作（display：none to display：inline）

如何在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文本，然后触发一个函数来用show类替换类，从而显示应设置为inline而不是inline-block。

我有一个工作小提琴，但该网站目前不会让我保存它以分享。

Answer 2

您可以使用回调函数来更改样式。

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

我希望它有所帮助。

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

2 个答案: