我正在寻找一个 jQuery 手风琴，就像可以在avg 网站上找到但没有运气的那个，所以我希望这里有人能指出我正确的方向。源代码或示例。
我已经让手风琴工作了，但它缺少阅读更多/关闭功能，我想使用它。
问问题
21492 次
4 回答
11
const moreText = "Read more";
const lessText = "Read less";
const moreButton = $("button.readmorebtn");
moreButton.click(function() {
const $this = $(this);
$this.text($this.text() == moreText ? lessText : moreText).next(".more").slideToggle("fast");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p>
<button class="readmorebtn" type="button">Read more</button>
<p class="more" style="display:none">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>于 2013-10-11T18:19:35.820 回答
4
Jquery UI 很棒，但它有很多额外的东西，只是为了一个小小的手风琴。如果您要使用所有功能，那就去吧。
您也可以只使用 jQuery 方法show()、hide() 或 toggle()。按照链接了解这些，我不会在这里解释它们。
所有这些的问题是它们显示或隐藏所有文本，正如这里的其他一些答案所展示的那样。如果您想显示一两行（或十行）实际文本，然后通过单击按钮/链接来显示所有文本，您需要比固定方法多一点。如果你只是想要一个小脚本来做到这一点，或者只是想了解它是如何完成的，这里是我的小插件。我的脚本动画类似于 show()/hide() 的手风琴的打开和关闭，但会在关闭位置显示预定义数量的文本。
希望这可以帮助
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-11T20:57:26.177 回答
0
$.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-20T13:58:58.820 回答
-1
Jquery UI Accordion 可以满足您的需求。具体看一下可折叠功能。
工作示例：小提琴
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 UI（手风琴）
$( ".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-11T18:18:50.760 回答