閱讀更多/較少的jQuery手風琴

我正在尋找一種像avg website那樣沒有運氣的jQuery手風琴，所以我希望這裏有人能指引我進入正確的方向。來源代碼或示例。閱讀更多/較少的jQuery手風琴

我已經有手風琴的工作，但它是閱讀更多/關閉功能缺少，我想使用。

來源

2013-10-11 robonhigh

如果我的回答對您有幫助，請接受。 –

-1

Jquery UI Accordion做你想做的。特別看看可摺疊的功能。

工作例如：Fiddle

HTML

<div id="content"> 
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet,</p> 
    <div class="accordion"> 
     <h3>Read More</h3> 
     <p> nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p> 
    </div> 
</div>

jQuery用戶界面（手風琴）

$(".accordion").accordion({ 
    active: false, 
    collapsible: true, 
    activate: function(event, ui) { 
     ui.newHeader.text("Close"); 
     ui.oldHeader.text("Read More"); 
    }, 
});

然後只是它的風格你的味道。

CSS

#content {border-bottom: 1px solid #999; padding-bottom: .5em; } 
#content .accordion { font-family: inherited; font-size: 100%; } 
#content .ui-accordion .ui-accordion-header { padding: 0; } 
#content .ui-accordion .ui-accordion-header-icon { display: none; } 
#content .accordion .ui-state-default, 
#content .accordion .ui-state-active { border: none; background: none; padding: 0; } 
#content .accordion .ui-widget-content { padding: 1em 0 0 .5em; border: none; }

使用jQuery UI可以是不錯的，因爲他們已經添加的東西像上/下鍵支持，您可以很容易地改變動畫類型。您還可以捕獲該事件進行激活，並根據需要更改標題的文本。

來源

2013-10-11 18:18:50 kasdega

嗨，我有類似的東西類似http://www.switchroyale.com/vallenato/ – robonhigh

Fiddle

HTML

<div class="wrap"> 
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget 
     lacinia odio sem nec elit. 
    </p> 
    <a class="readmorebtn">Read more</a> 
    <p class="more">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. 
     Curabitur blandit tempus porttitor. Lorem ipsum dolor sit amet, consectetur 
     adipiscing elit. Maecenas faucibus mollis interdum. Etiam porta sem malesuada 
     magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl 
     consectetur. 
    </p> 
</div>

jQuery的

var moreText = "Read more", 
    lessText = "Read less", 
    moreButton = $("a.readmorebtn"); 

moreButton.click(function() { 
    var $this = $(this); 
    $this.text($this.text() == moreText ? lessText : moreText).next("p.more").slideToggle("fast"); 
});

更新：縮短了jQuery一點點。

來源

2013-10-11 18:19:35

不幸的是，這將不適用於具有UL的崩潰內容。請參閱http://jsfiddle.net/gDvyR/120/ – redcoder

@redcoder這是因爲1.選擇器僅引用段落（'p.more'），其次是因爲只有第一個匹配元素被切換。這是一個小提琴的作品。（使用'nextAll'並且只使用'.more'類）：http://jsfiddle.net/gDvyR/121/ –

@redcoder另外，你的標記是不正確的。 'ul'大多寫在'p'標籤之外。 –

Jquery UI非常好，但它爲很多額外的東西只是一個小手風琴。如果你打算使用所有的功能，那就去做吧。

您也可以使用jQuery方法show()，hide（）或toggle（）。按照鏈接瞭解這些，我不會在這裏解釋它們。

與所有這些問題是他們顯示或隱藏所有的文本，因爲這裏的一些其他答案演示。如果你想顯示一行或兩個（或十個）實際文本，然後通過單擊按鈕/鏈接顯示所有內容，則需要比固定方法多一點。如果你只是想要一個腳本來做到這一點，或者只是想了解它是如何完成的，這裏是我的小插件。我的腳本將手風琴的打開和關閉與show（）/ hide（）類似，但會在關閉位置顯示預定義的文本量。

Fiddle

希望這有助於

HTML

<div class="show-more-snippet"> 
//your text goes here// 
</div> 
<a href="#" class="show-more">More...</a>

CSS

.show-more-snippet { 
    height:35px; /*this is set to the height of the how much text you want to show based on the font size, line height, etc*/ 
    width:300px; 
    overflow:hidden; 
}

的jQuery

$('.show-more').click(function() { 
    if($('.show-more-snippet').css('height') != '35px'){ 
     $('.show-more-snippet').stop().animate({height: '35px'}, 200); 
     $(this).text('More...'); 
    }else{ 
     $('.show-more-snippet').css({height:'100%'}); 
     var xx = $('.show-more-snippet').height(); 
     $('.show-more-snippet').css({height:'35px'}); 
     $('.show-more-snippet').stop().animate({height: xx}, 400); 
     // ^^ The above is beacuse you can't animate css to 100%. So I change it to 100%, get the value, change it back, then animate it to the value. If you don't want animation, you can ditch all of it and just leave: $('.show-more-snippet').css({height:'100%'});^^ // 
     $(this).text('Less...'); 
    }

}）;

來源

2013-10-11 20:57:26 sn3ll

$.fn.wrap = function() { 
    var msg = $(this).text(); 
    selector = $(this).attr('id'); 
     if(msg.length > 60){ 
      $(this).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>'); 
     } 
     $('.more_link').live('click',function(){ 
      $('#'+selector).html(msg+' <span class="less_link cursor f-bold">[less]</span>'); 
     }); 
     $('.less_link').live('click',function(){ 
      $('#'+selector).html(msg.substring(0,40) + '...<span class="more_link cursor f-bold">[more]</span>'); 
     }); 
}; 
$(document).ready(function(){ 
    $('#validation_message').wrap(); 
});

來源

2014-05-20 13:58:58

閱讀更多/較少的jQuery手風琴

回答

相關問題