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

Question

我正在寻找一款jQuery手风琴,比如可以在平均网站上找到的没有运气的手风琴,所以我希望有人可以指出我正确的方向.来源代码或示例.

我已经有手风琴正在工作,但它是读取更多/近距离功能,我想要使用.

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 Accordion可以满足您的需求。具体看一下可折叠功能。

工作示例：小提琴

超文本标记语言

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