0

我希望能够在页面上显示全文，但只显示第一段并使用阅读更多按钮然后显示隐藏文本。我希望能够使用 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 会做剩下的事情，但我想不出该怎么做！

4

4 回答 4

1

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

CodePen 演示

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;
}
于 2013-10-14T09:53:01.870 回答
0

看一下这个 ：

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;
}
于 2013-10-14T09:35:58.080 回答
0

您可以使用伪类选择器: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中实时查看。

于 2013-10-14T09:47:50.260 回答
-1

尝试这样的事情：

<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/

于 2013-10-14T09:49:27.363 回答