Question

我有网页，其中我想显示几个用户评论。我想显示前几行，然后（使用jQuery）让用户展开以查看所有行，然后折叠以将其恢复到前几行。

我使用jQuery slideToggle方法就好了，但它将其折叠为完全没有显示的内容。我想要崩溃到（就像我说的）前几行（或50px高度或其他）。

感谢您的帮助。

Answer 1

jquery：.comment:nth-child(n+3){ display: none;};

css：class TagForm(forms.Form): tag = forms.CharField(label='Tag', max_length=100) class Meta: model = Company field = 'tag'。
这是您的问题的可能解决方案，因为它将仅针对不是前三个孩子的评论。缺点是它会分别切换它们中的每一个。

Answer 2

为此，您可以使用readmore.js

易于使用$('#target').readmore();

<div id="target">Some long text here</div>

在此处查看更多内容Readmore.js

FIDDLE：在行动here

中查看

Answer 3

var toggleMinHeight = 30,
    duration = 2000,
    easing = 'swing';
$('.toggleDiv').each(
    function(){
        $(this).attr('data-height',$(this).height());
    }).click(
    function(){
        var curH = $(this).height();
        if ($(this).is(':animated')){
            return false;
        }
        else if (curH == $(this).attr('data-height')) {
            $(this).animate(
                {
                    'height' : toggleMinHeight
                }, duration, easing);
        }
        else if (curH == toggleMinHeight){
            $(this).animate(
                {
                    'height' : $(this).attr('data-height')
                }, duration, easing);
        }
    });

.toggleDiv {
    position: absolute;
    top: 0;
    width: 25%;
    margin: 0 1%;
    border: 1px solid #ccc;
    border-bottom: 10px solid #ccc;
    padding: 0.5em;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggleDiv">
    <p>click on text to slide toggle


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p>
</div>

使用jQuery slideToggle时如何显示一些DIV文本？

3 个答案: