如何使自述按钮在文章的第一段之后显示图像和h3标签

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

本文关键字：显示 之后 一段 显示图 图像 标签 h3 按钮 何使自 文章      更新时间：2024-05-31

Hello-I已经能够使".readmore"按钮工作以显示段落标记。不幸的是，当我点击按钮时，h3标签和图像没有显示。请帮忙，这样每一篇文章在我的页面上就不会显得太长。请在此处查看完整代码--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>

好的，有一些事情需要解决。

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>添加到你想要的图像的地方。我看到你在用阿玛利奥类的背景。如果它与其他附加内容一起显示和隐藏，这也会起作用。

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

4） 您的跨度可以替换为div。完成此操作后，可以删除style="display:block；"属性。几乎从来都不是一个好主意，使一个跨度一块。相反，只需使用div元素。

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

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

在您的代码中，您有两个类为amarillo的section元素。看起来这就是您想要添加图像的方式。我会删除这些并添加img标记。这样，匹配img标记的代码将有一个img来执行。在我的示例中，我删除了对所有img元素执行操作的代码，而是对具有特定类的所有元素执行操作。

你可以在这里看到我对你代码的修改。

相关文章：