Question

我正在尝试创建一个包含多个段落的部分，您可以将其展开以或多或少地阅读。我如何通过纯自举CSS来区分它们，以使其无法一次打开和关闭？

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
    height: 62px !important;
    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#summary p.collapsing {
    min-height: 42px !important;
}

#summary a.collapsed:after  {
    content: '+ Read More';
}

#summary a:not(.collapsed):after {
    content: '- Read Less';
}

下面的示例：

Codepen

Answer 1

检查以下代码段。您需要使用不同的ID才能获得期望的输出。

#summary {
  font-size: 14px;
  line-height: 1.5;
}

#summary p.collapse:not(.show) {
  height: 42px !important;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#summary p.collapsing {
  min-height: 42px !important;
}

#summary a.collapsed:after {
  content: '+ Read More';
}

#summary a:not(.collapsed):after {
  content: '- Read Less';
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.js"></script>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div id="summary">
        <p class="collapse" id="collapseSummary">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>

        <p class="collapse" id="p1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#p1" aria-expanded="false" aria-controls="collapseSummary"></a>

        <p class="collapse" id="p2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin
          erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa,
          fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#p2" aria-expanded="false" aria-controls="collapseSummary"></a>
      </div>
    </div>
  </div>

Answer 2

为每个部分设置不同的ID，并为每个链接设置不同的href目标。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4">
      <div id="summary">
        <p class="collapse" id="section1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#section1" aria-expanded="false" aria-controls="section1"></a><br /><br />

        <p class="collapse" id="section2">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
        </p>
        <a class="collapsed" data-toggle="collapse" href="#section2" aria-expanded="false" aria-controls="section2"></a>
      </div></div></div>

Answer 3

您可以通过更改ID

尝试一下：

 <div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div id="summary1">
                <p class="collapse1" id="collapseSummary1">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
                    hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
                    tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
                    massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
                    neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
                </p>
                <a class="collapsed1" data-toggle="collapse" href="#collapseSummary1" aria-expanded="false"
                    aria-controls="collapseSummary"></a>
            </div>
        </div>

        <div class="col-md-4">
            <div id="summary2">
                <p class="collapse2" id="collapseSummary2">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor maximus laoreet.
                    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In
                    hac habitasse platea dictumst. Suspendisse venenatis sollicitudin erat in gravida. Sed eget nisl
                    tristique, commodo lectus sit amet, vulputate sem. Cras porttitor lorem ipsum, sit amet iaculis
                    massa feugiat vitae. Curabitur sapien odio, ullamcorper tincidunt interdum vitae, vestibulum eu
                    neque. Nam leo massa, fringilla eget mauris feugiat, auctor suscipit justo.
                </p>
                <a class="collapsed2" data-toggle="collapse" href="#collapseSummary2" aria-expanded="false"
                    aria-controls="collapseSummary"></a>
            </div>
        </div>
    </div>
</div>

#summary1,
#summary2 {
    font-size: 14px;
    line-height: 1.5;
}

#summary1 p.collapse1:not(.show),
#summary2 p.collapse2:not(.show){
    height: 42px !important;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}

#summary1 p.collapsing1,
#summary2 p.collapsing2 {
    min-height: 42px !important;
}

#summary1 a.collapsed1:after,
#summary2 a.collapsed2:after {
    content: '+ Read More';
}

#summary1 a:not(.collapsed1):after,
#summary2 a:not(.collapsed2):after{
    content: '- Read Less';
}

引导程序一次折叠所有Read More

3 个答案: