Question

我正在从事个人项目。我在同一页面上的文章很少，文章数量非常大（虽然不是很大）。我想要的是切换按钮。单击按钮后，应显示其他文本，并且必须更改按钮值（即从continue reading到show less或类似的东西。）再次单击按钮后，附加文本必须崩溃了。除此之外，我想在文本之间切换时添加一些慢动作。我怎么能这样做？到目前为止我在互联网上看到的例子并没有涉及我期望实现的目标。互联网上的大多数演示和示例使用文本属性（例如简单show more和show less文本），而不是像我一样使用按钮元素。

 <article class="post">
                <header>
                    <div class="title">
                        <h2><a href="index.html">Who am I? What am I? Why am I?</a></h2>
                        <p>Sub Header</p>
                    </div>
                    <div class="meta">
                        <time class="published" datetime="2017-01-14">November 1, 2017</time>
                        <a href="#" class="author"><span class="name">John Doe</span><img src="images/author-avatar.png" alt="" /></a>
                    </div>
                </header>
                <a href="index.html" class="image featured"><img src="images/who_iam.jpg" alt="" /></a>
                <p>Default text<br>
                 Toggle this text. Show this text when "continue reading" button is clicked. Once the button is clicked change the button value to "read less". Once the "read less" button is clicked hide this text.

     </p>
               <footer>
                  <ul class="actions">
                        <li><a href="" class="button big">Continue Reading</a></li>
                    </ul>

                </footer>
            </article>

Answer 1

如果您正在使用jQuery -

最初使用CSS隐藏内容。
在点击事件中将$('#myModal').on('show.bs.modal', function() { $(this).parent().show(); }) $('#myModal').on('hide.bs.modal', function() { $(this).parent().hide(); })添加到隐藏内容。

这是一个演示 - ＆gt; https://codepen.io/thesumit67/pen/wemjPG

Answer 2

您应该使用简单的javascript功能创建一个按钮：

＆＃13;

 <article class="post">
                <header>
                    <div class="title">
                        <h2><a href="index.html">Who am I? What am I? Why am I?</a></h2>
                        <p>Sub Header</p>
                    </div>
                    <div class="meta">
                        <time class="published" datetime="2017-01-14">November 1, 2017</time>
                        <a href="#" class="author"><span class="name">John Doe</span><img src="images/author-avatar.png" alt="" /></a>
                    </div>
                </header>
                <a href="index.html" class="image featured"><img src="images/who_iam.jpg" alt="" /></a>
                 <p>Default text</p>
                <p id='text' style='display: none;'>
                 Toggle this text. Show this text when "continue reading" button is clicked. Once the button is clicked change the button value to "read less". Once the "read less" button is clicked hide this text.

     </p>
               <footer>
                  <ul class="actions">
                        <li><button id='btn' onclick='toggle()'>Show More</button></li>
                    </ul>

                </footer>
            </article>

＆＃13;

{{1}}

＆＃13;

如何在按钮元素的同时在“显示更多”和“显示更少”之间切换？

2 个答案: