[英]Toggle slide with jquery
我有以下javascript,允許頁面訪問者單擊鏈接並顯示文章的全部內容,例如“閱讀更多”,當您單擊它時,整個文章將顯示在下面。
我想要的是,當您單擊“閱讀更多”時,向下滑動的文章不僅會出現。
預先謝謝你們。
的HTML
<p>The text that is shown by default.<a href="#" id="example-show" class="showLink" onclick="showHide('example');return false;">Read more</a></p>
<div id="example" class="more">
<p>The rest of the article</p>
<p><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
的CSS
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666; }
a.showLink, a.hideLink {
text-decoration: none;
color: #336699;
padding-left:20px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
的JavaScript
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
正如您在問題標題中提到的那樣,jQuery使此類動畫更加容易(因為有人已經仔細檢查並編碼了細節)。
您可以嘗試:
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
function showHide(shID) {
if ($('#shID').length) {
var isDown = $('#shID').data('isDown')?false:true;
$('#shID'+(isDown?"":"-show")).slideDown('slow');
$('#shID'+(isDown?"-show":"")).slideUp('slow');
}
}
</script>
使用jQuery,您可以執行以下操作:
$(function () {
$('.showLink').click(function (e) {
e.preventDefault();
$('#example').slideToggle();
});
$('.hideLink').click(function (e) {
e.preventDefault();
$('#example').slideUp();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.