Question

我正在尝试创建“阅读更多”按钮，以便可以折叠大块文字。到目前为止，我所掌握的是以下内容。但是，当我单击“更多”按钮时，它不会显示其余文本。

html ：

{% extends "layout.html" %}

{% block body %}

        <div class="jumbotron text-center">
            <br>
            <center><h1>About Us</h1></center>
            <section class="main items">
            <article class="item">
                <header>
                    <a href="#"><img src="images/pic01.jpg" alt="" /></a>
                    <h3>John Doe</h3>
                </header>
                <center><img src="static/pic.jpg" style="width:400px;"></img></center>
                <br><br><p>This is where the text I want to show goes.</p>                          
                <button class="collapsible">Read More</button>
                <div class="more_content">
                    <p>This is the text I want to appear after clicking the read more button.</p>
                </div>  
            </article>
        </div>

    <!-- Scripts -->

    <script src="js/collapsible.js"></script>

{% endblock %}

CSS ：

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #ffbf00;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}


/* Style the collapsible content. Note: hidden by default */
.more_content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #ffbf00;
}

这是根据注释中的建议添加的JS。但是，当我单击“自述”按钮时，它仍然不起作用。

JS（collapsible.js）：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var more_content = this.nextElementSibling;
    if (more_content.style.display === "block") {
      more_content.style.display = "none";
    } else {
      more_content.style.display = "block";
    }
  });
}

Answer 1

我不能推荐足够的jQuery。多年以来，我一直不想使用它，但是老实说，它是最好/最简单的解决方案。如果您想扩大/缩小或只是显示/隐藏，那就完美了。

http://api.jquery.com/toggle/

Answer 2

您可以仅使用HTML和CSS来做到这一点，使其看起来像按钮一样。不过，这将使用和标记。我不确定您的听众，所以我不知道这对您是否重要-但这是替代解决方案。

<section>
    <article>
        Text/content you'd like to lead with
    </article>
    <details>
        <summary>Your 'Read More' button</summary>
        Content you'd like to appear after clicking
    </details>
</section>

您可以使用CSS设置 summary 标签的样式，使其看起来像一个按钮。

这是一个有效的示例：https://jsfiddle.net/Lhonf5xg/15/

无法阅读“更多信息”的HTML / CSS可折叠按钮

2 个答案: