Question

我正在尝试执行“阅读更多”按钮，该按钮必须位于隐藏文本上方，隐藏文本必须具有一些透明度，您几乎看不到它，如下例所示：

（忽略绿松石色单元格）

我最初使用SCSS并且根本没有使用JS。但现在我的客户改变他的矿井，他就是这么想的。以下是我到目前为止所做的工作：https://codepen.io/maketroli/pen/zzNKqR

SCSS：

// READ MORE BASE
.read-more-wrap {

  .read-more-state
  // .read-more-state: This is the input checkbox. We want this to be the first child after the wrap element.
  // HTML Usage: <input type="checkbox" class="read-more-state" id="_uniqueID_" name="toggle" />
    {
      display: none; //We don't want to show the text boxes

      // add ellipsis if it's within a paragraph
      ~ p .read-more-trigger,
      ~ * p .read-more-trigger {
        &:before {
          content: '\2026' ' '; //ellipsis
          color: #444;
        }
      }

      ~ .read-more-trigger, 
      ~ * .read-more-trigger {
      // .read-more-trigger: This is used to trigger the action. It's actually the label for the .read-more-state checkbox, which we declare below.
      // HTML Usage: <label for="_uniqueID_" class="read-more-trigger"></label>
      // SCSS Sytax: When the trigger is a sibling, or the child of any sibling of .read-more-state within .read-more-wrap
        cursor: pointer;
        color: #008dec;
        max-width: 670px;
        margin-bottom: .25em;

        &:hover, &:focus, &:active {
          color: #ff4500;
        }

        &:after {
          content: 'Show more';
          border-bottom: 1px dotted #ccc;
          white-space: nowrap;
          font-size: 90%;
          letter-spacing: -.3px;
        }
      } // end .read-more-trigger

      ~ .read-more-target,
      ~ * .read-more-target {
      // .read-more-target: This is what gets shown or hidden when the trigger is pressed.
      // HTML Usage: <span class="read-more-target">content</span> - Note that this can be a span, a div, a p, or any other element that you want to show or hide, as long as it's a sibling, or the child of a sibling of .read-more-state
      // SCSS Syntax: When the target is a sibling, or the child of any sibling of read-more-state, then that target's state is:
        opacity: 0;
        max-height: 0;
        font-size: 0;
        visibility: hidden;
        transition: .125s linear;
      }

      // when .read-more-state is checked:
      &:checked {
        ~ * .read-more-target, 
        ~ .read-more-target {
          opacity: 1;
          max-height: 999em;
          font-size: inherit;
          visibility: visible;
        }

        ~ .read-more-trigger:before,
        ~ * .read-more-trigger:before {
          content: '';
        }

        ~ .read-more-trigger:after,
        ~ * .read-more-trigger:after {
          content: 'Show less';
        }
      }  // &:checked
    } // .read-more-state 
}
// END READ MORE BASE

// BEGIN MOBILE ONLY
.read-more-wrap--mobile {
  @extend .read-more-wrap;
  .read-more-state {
    @media screen and (min-width: 720px) {
      ~ * .read-more-target, 
      ~ .read-more-target {
            opacity: 1;
            max-height: 999em;
            font-size: inherit;
            visibility: visible;
      }
    }
    :checked {
      ~ * .read-more-target, 
      ~ .read-more-target {        
          @media screen and (min-width: 720px) {
            opacity: 1;
            max-height: 999em;
            font-size: inherit;
            visibility: visible;
          }
      }
    }

    ~ .read-more-trigger, 
    ~ * .read-more-trigger {
      @media screen and (min-width: 720px) {
        display: none;
      }
    }
  }
}
// END MOBILE ONLY

/* Other style */ 
body {
  padding: 2%;
}

HTML：

<div class="read-more-wrap--mobile">
  <input type="checkbox" class="read-more-state" id="mobile" name="toggle" />
  <h2>Read more wrap</h2>
  <p>Pinterest taxidermy et heirloom, ennui enim eu bicycle rights fugiat nesciunt commodo. High Life food truck jean shorts in. Blog asymmetrical<span class="read-more-target">  cold-pressed photo booth. Neutra chia in, mustache Etsy nostrud plaid kogi. Magna polaroid stumptown aliqua put a bird on it gentrify, street art craft beer bicycle rights skateboard. DIY plaid gentrify, sustainable sapiente seitan mumblecore viral cardigan. Nisi pariatur laborum cornhole kitsch tempor fingerstache Bushwick. </span><label for="mobile" class="read-more-trigger"></label></p>
</div>

我标记了JS，以防有解决方案。那么，有什么建议吗？

Answer 1

您已让Autopostback = True拥有Object.keys(myData.customNotes).reduce((prev, curr) => { const date = curr; const concernedDate = myData.customNotes[curr].concernedDate; const numberNotes = myData.customNotes[curr].notesList.length; const notesList = myData.customNotes[curr].notesList.map(note => `- id: ${note.id} \n - title: ${note.title} \n\n`); return prev + `${date} \n ${concernedDate} \n Number of notes: ${numberNotes} \n Notes list: \n ${notesList} \n - - - - - - - - \n`; }, ''));，然后更改高度以匹配Object.keys(myData.customNotes).reduce(function (prev, curr) { const date = curr; const concernedDate = myData.customNotes[curr].concernedDate; const numberNotes = myData.customNotes[curr].notesList.length; const notesList = myData.customNotes[curr].notesList.map(function(note) { return ‘- id: ‘ + note.id + ‘\n’ + ‘- title: ‘ + note.title + ‘\n\n’;}); return prev + 'date' + '\n' + concernedDate + '\n Number of notes: ' + numberNotes + '\n Notes list: \n' + notesList + ' \n - - - - - - - - \n'; }, ''));以显示全文。你在css上比较好，所以我认为你可以让它看起来比我的好：）

如果你计划一次超过1个，你也应该替换id，但扩展已经考虑了因子相关性，所以不需要改变太多。

overflow: hidden

scrollHeight

如何透明地阅读更多文字？

1 个答案: