使用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顯示/隱藏文本

回答

相關問題