使用CSS显示/隐藏文本

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

所以沿着线的东西：

<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会做休息，但我想不出该怎么办！

来源

2013-10-14 RustyIngles

点击功能通常需要JS禁止复选框黑客，我一般不会推荐。 –

对于 '可逆' 点击此处键入功能的复选框的选择。

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; 
}

来源

2013-10-14 09:53:01

检查了这一点：

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-14 09:35:58

你可以使用伪类选择: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-14 09:47:50 Puigcerber

-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-14 09:49:27

他说：“我想只能用CSS和jQuery来做到这一点”。 – Puigcerber

所以他做到了。好吧。 –

使用CSS显示/隐藏文本

回答

相关问题