Question

我正在寻找一个jQuery手风琴，就像avg website上没有运气的手风琴一样，所以我希望有人能指出我正确的方向。源代码或示例。

我已经有手风琴正在工作，但它是缺少的读取/关闭功能，我想使用。

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>

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

}）;

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

Answer 4

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 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可能很不错，因为他们已经添加了支持上/下键的功能，您可以轻松更改动画类型。您还可以捕获事件以激活，并根据需要更改标题的文本。

阅读更多/更少的jQuery手风琴

4 个答案: