展开/收起jQuery手风琴

Question

我正在寻找一个类似于avg网站上的jQuery手风琴，但没有成功，所以我希望在这里有人可以指点我正确的方向，提供源代码或示例。

我已经让手风琴起作用了，但是缺少“阅读更多/关闭”功能，这正是我想要使用的。

- robonhigh

Answer 1

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>

- Bram Vanroy

---

不幸的是，这对具有UL的折叠内容不起作用。请参见http://jsfiddle.net/gDvyR/120/。 - redcoder

@redcoder 这是因为1.选择器只引用段落(p.more)，其次只有第一个匹配的元素被切换。这里有一个有效的fiddle（使用nextAll和仅类.more）：http://jsfiddle.net/gDvyR/121/ - Bram Vanroy

@redcoder，另外，你的标记有误。ul必须写在p标签之外。 - Bram Vanroy

Answer 2

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

});

- sn3ll

Answer 3

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

- Ankit Vishwakarma

Answer 4

Jquery UI手风琴可以实现您想要的功能。具体来说，请查看可折叠功能。

工作示例：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 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很好，因为他们已经添加了像支持上/下键这样的功能，并且您可以轻松更改动画类型。您还可以捕获激活事件并更改标题文本（如果需要）。

- kasdega