Question

我想使用slideToggle作为文本，就像read more一样。显示第一行的更多特性，当客户端点击div时，全文显示。

<div class="group-one-row">
    <div class="row-header">
        <p class="group-regular-header">
            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
        </p>
    </div>
</div>

$('.row-header').on('click', function() {
   $(this).parent().find('p').slideToggle();
});

使用此代码，我可以显示/隐藏全文，但我需要始终显示第一行。

Answer 1

为每一行指定一个唯一的ID，然后确保您要在不是第一行的div中切换，否则如果它不可见，您将在第一行中滑动。

$('.row-header').on('click', function() {

   var p = $(this).parent().find('p');

   if( $(p).attr('id') != 'idOfTheFirstRow' && $('p').is(':visible') )
       $(p).slideToggle();
});

Answer 2

在我看来，在这种情况下你不应该使用.slideToggle()。尝试在<p>标记周围放置一个包装器，并将此包装器的max-height设置为与单行的行高相同的高度。然后溢出隐藏en将max-height设置为约1000px（或使用JavaScript计算总高度）

jquery slideToggle（）第一行显示

2 个答案: