如何複製YouTube的「顯示更多」功能？

Question

我想在我的網站上重現YouTube的「顯示更多」功能。在每個視頻下方都有一個「顯示更多」鏈接。如果您點擊該鏈接，它會向下移動，並顯示一些以前隱藏的文字。我怎樣才能做到這一點？

Answer 1

其中一個標記表示您願意使用jQuery。以下鏈接解釋了slideToggle如何實現這種效果。如果您希望它在首頁加載時隱藏，則應該將div或其他元素的樣式設置爲display: none;。

http://www.mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/

$("#slideToggle").click(function() { 
    $('.slideTogglebox').slideToggle(); 
}); 

正式文件：http://api.jquery.com/slideToggle/

Answer 2

只有A CSS版本我只是做：http://dabblet.com/gist/3157489

它工作在Chrome，火狐，Safari，歌劇，IE9 +。顯示/隱藏功能在IE9中可用，但缺少轉換（使用附加元素模擬漸變漸變）。

的HTML結構是這樣的：

<div class="info-wrapper"> 
    <input type="checkbox" id="showhide"> 
    <label for="showhide"> 
      <div class="more">Show more</div> 
      <div>Show less</div> 
    </label> 
    <div class="info"> 
     <p><!-- text, text, more text --></p> 
     <!--[if lte IE 9]><div class="aftershadow"></div><![endif]--> 
    </div> 
</div> 

的CSS：

body { 
    background: #ccc; 
} 
.info-wrapper { 
    height: auto; 
    width: 500px; 
    margin: 4em auto; 
    padding: 0 0 2em 0; 
    position: relative; 
} 
.info { 
    max-height: 120px; 
    height: auto; 
    padding: .5em 0; 
    border-bottom: solid 1px #fff; 
    border-radius: 0 0 1em 1em; 
    overflow: hidden; 
    position: relative; 
    transition: 1s; 
} 
p { margin: 1em; } 
.info:after, .aftershadow { 
    bottom: 0; 
    width: 100%; 
    height: 3em; 
    border-radius: 0 0 1em 1em; 
    position: absolute; 
    background: linear-gradient(rgba(192,192,192,0), #ccc); 
    content: ''; 
} 
.aftershadow { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc); 
} 
.info-wrapper input[type=checkbox] { 
    display: none; 
} 
.info-wrapper label { 
    left: 50%; 
    bottom: 1.5em; 
    width: 9em; 
    height: 1.25em; 
    margin: 0 0 0 -2.5em; 
    border-bottom: solid 1px #fff; 
    border-radius: 0 0 1em 1em; 
    overflow: hidden; 
    position: absolute; 
    font: 700 .67em/1.25em Arial; 
    text-align: center; 
    text-shadow: 0 1px 0 #fff; 
    cursor: pointer; 
} 
.info-wrapper label .more { margin: -.1em 0 .35em; transition: 1s; } 
.info-wrapper input[type=checkbox]:checked ~ .info { 
    max-height: 15em; 
} 
.info-wrapper input[type=checkbox]:checked + label .more { 
    margin-top: -1.65em; 
} 

的想法是這樣的：在HTML結構，你有一個複選框被隱藏，但可以點擊其label選中/取消選中。

最初，信息被壓縮，複選框未被選中。點擊「顯示更多」（位於label內）勾選複選框，現在可以使用:checked pseudo-class更改其兄弟姐妹中的元素的樣式，並將它放在HTML中（在這種情況下爲label和.info）和the general sibling selector。

這是做的部分是：

.info-wrapper input[type=checkbox]:checked ~ .info { 
    max-height: 15em; 
} 
.info-wrapper input[type=checkbox]:checked + label .more { 
    margin-top: -1.65em; 
} 

---

另一種方法，這也將在IE8的工作是使用環節，其:focus/:active僞類，而不是一個複選框，其:checked的僞類。這種方法的缺點是，只要你點擊頁面的其他地方，.info就會再次被壓縮。

演示：http://jsfiddle.net/thebabydino/U7Cyk/

HTML並沒有太大變化，我只是跟兩個環節

<div class="info-wrapper"> 
    <a href="#" tabindex="1" class="more">Show more</a> 
    <a href="#" tabindex="1" class="less">Show less</a> 
    <div class="info"> 
     <p><!--stuff, not wasting space here with it--></p> 
     <!--[if lte IE 9]><div class="aftershadow"></div><![endif]--> 
    </div> 
</div> 

的CSS大多是相同的替換複選框和標籤。有關input & label一切都不對勁了，而是有：

.info-wrapper a { 
    left: 50%; 
    bottom: 1.5em; 
    width: 9em; 
    height: 1.25em; 
    margin: -.1em 0 .35em -4.5em; 
    border-bottom: solid 1px #fff; 
    border-radius: 0 0 1em 1em; 
    display: block; 
    overflow: hidden; 
    position: absolute; 
    color: #000; 
    font: 700 .67em/1.25em Arial; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #fff; 
    transition: 1s; 
    cursor: pointer; 
} 
.info-wrapper a:focus { outline: none; } 
.info-wrapper .less { 
    margin-top: -1.5em; 
    opacity : 0; 
    z-index: -1; 
} 
.info-wrapper .more:focus ~ .info, 
.info-wrapper .more:active ~ .info { 
    max-height: 15em; 
} 
.info-wrapper .less:focus ~ .info, 
.info-wrapper .less:active ~ .info { 
    max-height: 120px; 
} 
.info-wrapper .more:focus, 
.info-wrapper .more:active { 
    opacity: 0; 
} 
.info-wrapper .more:focus + .less, 
.info-wrapper .more:active + .less { 
    opacity: 1; 
    z-index: 1; 
} 

---

---

使用jQuery - 演示http://jsfiddle.net/thebabydino/yDfTq/

$('.more').click(function(){ 
    $(this).animate({'opacity': '0'}, 1000); 
    $('.less').animate({ 
     'opacity': '1', 
     'z-index': '1' 
    }, 1000); 
    $('.info').animate({'height': '15em'}, 1000); 
}); 
$('.less').click(function(){ 
    $(this).animate({ 
     'opacity': '0', 
     'z-index': '-1' 
    }, 1000); 
    $('.more').animate({'opacity': '1'}, 1000); 
    $('.info').animate({'height': '120px'}, 1000); 
}); 

的HTML是相同的，並且CSS是也大多相同：

.info { 
    height: 120px; 
    padding: .5em 0; 
    border-bottom: solid 1px #fff; 
    border-radius: 0 0 1em 1em; 
    overflow: hidden; 
    position: relative; 
} 
p { margin: 1em; } 
.info:after, .aftershadow { 
    bottom: 0; 
    width: 100%; 
    height: 3em; 
    border-radius: 0 0 1em 1em; 
    position: absolute; 
    background: linear-gradient(rgba(192,192,192,0), #ccc); 
    content: ''; 
} 
.aftershadow { 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00cccccc, endColorstr=#ffcccccc); 
} 
.info-wrapper a { 
    left: 50%; 
    bottom: 1.5em; 
    width: 9em; 
    height: 1.25em; 
    margin: -.1em 0 .35em -4.5em; 
    border-bottom: solid 1px #fff; 
    border-radius: 0 0 1em 1em; 
    display: block; 
    overflow: hidden; 
    position: absolute; 
    color: #000; 
    font: 700 .67em/1.25em Arial; 
    text-align: center; 
    text-decoration: none; 
    text-shadow: 0 1px 0 #fff; 
    cursor: pointer; 
} 
.info-wrapper a:focus { outline: none; } 
.info-wrapper .less { margin-top: -1.5em; opacity: 0; z-index: -1; }