Question

我希望能够在页面上显示全文，但只显示第一段并使用“阅读更多”按钮然后显示隐藏文本。我希望能够使用CSS和没有jQuery来做到这一点但却无法想到最好的方法。有什么想法吗？

这就是：

<p class="lead">This is the intro text</p>
<p>Read more</p>
<p class="hide"> This is the rest of the text, which is hidden on page load</p>

然后CSS会做其余的事，但我想不出该做什么！

Answer 1

对于'可逆'点击类型功能，这里是复选框替代。

CodePen Demo

<强> HTML

<div>
  <p class="lead">This is the intro text</p>
  <label for="toggle-1">Read More</label>
  <input type="checkbox" id="toggle-1">
  <p class="hide"> This is the rest of the text, which is hidden on page load</p>
</div>

CSS （带有一些基本样式）

div {
  margin:10px;
  border:1px solid lightgrey;
  padding:10px;
}

.hide {
  display:none;
}

label {
  background:lightblue;
  padding:5px;
  border-radius:5px;
  box-shadow:2px 3px 4px grey;
  border:1px solid blue;
}

label:active {
  box-shadow:0px 1px 2px grey;
}

input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
  /* For mobile, it's typically better to position checkbox on top of clickable
  area and turn opacity to 0 instead. */
}

/* Toggled State */
input[type=checkbox]:checked ~ .hide {
   display:block;
}

Answer 2

检查出来：

http://www.fiveforblogger.com/2011/10/pure-css-read-more-arrow-button.html

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>  
  </div>
</b:if>

CHANGE TO THIS
<a expr:href='data:post.url + "#more"'>Read more</a>


.jump-link {
  margin: 5px 0;
  padding: 0;
  position: relative;
}

.jump-link a {
  float: left;
  height: 24px;
  line-height: 24px;
  position: relative;
  margin: 0;
  padding: 0 10px 0 14px;
  background: #0ac92b;
  color: #fff;
  font-size: 12px;
  text-decoration: none; 
} 

.jump-link a:after {
  content: "";
  position: absolute;
  top: 0;
  right: -12px;
  width: 0;
  height: 0;
  border-color: transparent transparent transparent #0ac92b;
  border-style: solid;
  border-width: 12px 0 12px 12px;  
}

.jump-link a:hover {
  background: #555;
}

.jump-link a:hover:after {
  border-color: transparent transparent transparent #555;
}

Answer 3

您可以使用伪类选择器:target。

稍微调整一下你的HTML代码：

<p class="lead">This is the intro text</p>
<a href="#full">Read more</a>
<p id="full" class="hide"> This is the rest of the text, which is hidden on page load</p>

使用简单的CSS：

.hide { display: none;}
p:target {display:block;}

您可以在此JSFiddle中查看。

Answer 4

尝试这样的事情：

<article class="foo">
    <p>This is the first para</p>
    <p>More paras</p>
    <p>More paras</p>
    <p>More paras</p>
</article>

JS：

$('article.foo').children('p').each(function() {
    $this = $(this);

    if ($this.is(':first-child')) {
        $this.after('<p class="more">Read more...</p>');
    } else {
        $(this).hide();
    }
});

$('article.foo').on('click', 'p.more', function() {
    $(this).parent('article.foo').children('p').each(function() {            
        $(this).show();
    });
    $(this).hide();
});

小提琴：http://jsfiddle.net/chrispickford/5ETZY/1/

使用CSS显示/隐藏文本

4 个答案: