如何让阅读更多按钮在文章第一段之后显示图像和 h3 标签

Question

您好-我已经能够使“.readmore”按钮工作以显示段落标签。不幸的是，当我点击按钮时，没有显示 h3 标签和图像。请帮助每个 post/article 不要在我的页面上看太久。请在此处查看完整代码—— http://codepen.io/anon/pen/MyVgZo

HTML:

<section id="main">
        <div class="container">
            <section id="posts">
                <article class="post">

                     <section class="primavera">
                    <div class="wrapper">
                <!-- image top -->


                        </div>
                    </section>

                    <h1 >Lorem Ipsum</h1>
                    <h2 class="bold">Lorem Ipsum</h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, </p>
                    <span class="readmore" style="display: block;"><a href="#">Read more &gt;</a></span>
                     <p class="hide" id="show-this-on-click" >remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

                     <h3 class="hide" id="show-this-on-click" >NEED TO HAVE IT SHOW</h3>



                     <section class="amarillo hide" id="show-this-on-click" >
                        <div class="wrapper">
                    <!-- image top -->


                        </div>
                    </section>


                    <span class="readless hide" style="display: none;"><a href="#">Read less &gt;</a></span>

                </article>
            </section>
        </div>
    </section>

Answer 1

好的，有几件事需要解决。

1) 应该只有一个节点具有给定的 id 属性。您有多个节点 id="show-this-on-click"。您需要删除额外的 id 属性，以便只有一个节点具有 id="show-this-on-click"。或者，如果您按照我的示例进行操作，您可以删除所有 id 属性。

2) 没有图片标签。我会将此 <img src="http://placehold.it/350x150" class="more_content"></img> 添加到您想要图片的位置。我看到您正在使用 class amarillio 部分的背景。如果它与其他附加内容一起显示和隐藏，这也将起作用。

3) 您的 javascript 看起来像是被粘贴了两次。您需要删除第二个副本。

4) 您的跨度可以替换为 divs。完成后，您可以删除 style="display: block;" 属性。将 span 变成一个块几乎从来都不是一个好主意。而只是使用 div 元素。

完成这些后，我们就可以开始修复代码了。看来您混淆了 id 和 classes 的角色。我将从具有 id='show-this-on-click' 的每个节点中删除 id 属性，并在具有该 id 的那些节点上添加一个 show-this-on-click class。这意味着您需要更改 javascript，以便带有 $('#show-this-on-click') 的行变为 $('.show-this-on-click')

在 readless class 的点击处理程序中，您有另一个 readmore class 处理程序。那是可以删除的。

在您的代码中，您有两个带有 class amarillo 的 section 元素。看起来这就是您打算添加图像的方式。我会删除那些并添加一个 img 标签。这样，与 img 标签匹配的代码就会有一个 img 可以对其进行操作。在我的示例中，我删除了作用于所有 img 元素的代码，而是作用于具有特定 class.

的所有元素

你可以看到我对你代码的修改here。

如何让阅读更多按钮在文章第一段之后显示图像和 h3 标签

How can I make a readmore button show images and h3 tags after the first paragraph in the article

javascript

jquery

image

click

show-hide