显示“显示更多"按钮而不是div中的垂直滚动条 [英] show "show more" button instead of a vertical scrollbar in a div

问题描述

我有一个固定的div高度，其中包含一些html内容.当这个高度溢出时，我不希望滚动条出现，而是在div底部有一个按钮.而且只有当您按下该按钮时，所有内容才应显示，并且显然滚动条将自动显示.我知道有一个名为"overflow"的属性，您可以使用"scroll"值，但是在用户按下按钮之前，不需要滚动条.请注意，如果不发生溢出，则不应有任何按钮.

I have a fixed height div that contains some html content. When this height is overflowed, I don't want the scrollbar to appear, but instead a push button at the bottom of the div. And only when you push this button, all the content should be shown and obviously the scrollbar will be shown automatically. I understand that there is a property called "overflow" and you can use "scroll" value but I don't need the scrollbars until the user press the push button. Note, that there should be no button if the overflow doesn't happen.

---------------div starts-----------------
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT    

    [SHOW MORE BUTTON ]

---------------div ends-----------------

在没有jquery的情况下如何实现?您如何用javascript感觉内容将会溢出?

How would you implement this without jquery? How do you sense with javascript that the content will overflow?

推荐答案

您只能使用css(使用 checkbox 和:checked css状态)来实现此目的.

You can achive this using css only (using checkbox and :checked css state).

让我知道是否不清楚.

注意: max-height:500px; 只是示例.如果内容应该更大，请使用此值.

Note: the max-height:500px; it's just example. If the content supposed to be larger, play with this value.

input[type="checkbox"] {
    display:none;
}

label {
  color:blue;
  text-decoration:underline;
  margin-top:10px;
  cursor:pointer;
  display:inline-block;
}

label:after {
  content:"more";  
}

input:checked ~ label:after {
  content:"less";  
}

.inner {
  max-height:100px;
  overflow:hidden;
  transition:all .3s ease;
  width:100px;
}

input:checked + .inner {
  max-height:500px;
}

<div class="outer">
  <input type="checkbox" id="readmore" />
  <div class="inner">
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
    CONTENT CONTENT CONTENT CONTENT
  </div>
  <label for="readmore">Read </label>
</div>

这篇关于显示“显示更多"按钮而不是div中的垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！