多读/少读jQuery手风琴

我正在寻找一个jQuery手风琴，就像一个可以在没有运气的情况下找到的手风琴一样，所以我希望这里的人能给我指出正确的方向。源代码或示例

我已经有了手风琴，但它缺少了阅读更多/关闭功能，我想使用它。

做你想做的事。具体来看可折叠功能

工作示例：

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>

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

那就按照你的口味来做吧

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

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

使用jQueryUI会很好，因为他们已经添加了诸如支持向上/向下键之类的功能，并且您可以轻松地更改动画类型。如果需要，您还可以捕获事件以激活并更改标题文本。

const moreText=“阅读更多”；
const lessText=“少读”；
常量moreButton=$（“button.readmorebtn”）；
更多按钮。单击（函数（）{
const$this=$（this）；
$this.text（$this.text（）==moreText？lessText:moreText）.next（.more”）.slideToggle（“fast”）；
});

莫利斯夫妇，最不常见的luctus夫妇，最不常见的ligula夫妇，最不常见的是lacinia-odio-sem-nec-elit夫妇。

阅读更多
Aenean eu leo quam。威尼斯人前庭的佩伦茨克ornare sem lacinia quam。勃朗迪特港提托策拉比图尔酒店。Lorem ipsum dolor sit amet，是一位杰出的献身者。梅塞纳斯·福西布斯·莫利斯·因特杜姆。这是一个很好的例子。
这是一个伟大的共产主义者。

Jquery用户界面很棒，但仅仅一个小小的手风琴就需要很多额外的东西。如果你打算使用所有的功能，那就去做吧

您也可以只使用jQuery方法hide（）或toggle（）。按照链接了解这些，我在这里不做解释

所有这些的问题在于，它们显示或隐藏了所有文本，正如这里的一些其他答案所示。如果您想显示一行或两行（或十行）实际文本，然后通过单击按钮/链接来显示所有文本，您需要的不仅仅是固定的方法。如果你只是想用一个小脚本来做这件事，或者只是想了解它是如何完成的，这里是我的小插件。我的脚本为手风琴的打开和关闭设置动画，类似于show（）/hide（），但将在关闭位置显示预定义数量的文本


希望这有帮助

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>

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

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...');
    }

}))
 
$.fn.wrap=function（）{
var msg=$（this.text（）；
选择器=$（this.attr（'id'）；
如果（消息长度>60）{
$（this.html（msg.substring（0,40）+'…[更多]）；
}
$（'.more_link'）.live（'click'，function（）{
$（'#'+选择器）.html（msg+'[less]'）；
});
$（'.less_link'）.live（'click'，function（）{
$（'#'+选择器）.html（msg.substring（0,40）+'.[more]'）；
});
};
$（文档）.ready（函数（）{
$（“#验证_消息”）.wrap（）；
});
不幸的是，这对具有UL的折叠内容不起作用。看@redcoder，那是因为1。选择器仅引用段落（
p.more
），其次是因为仅切换第一个匹配的元素。这是一把有效的小提琴。（使用
nextAll
并仅使用类
。更多>/code>）：@redcoder另外，您的标记不正确。A
ul
大多数必须在
p
标签外书写。