标记隐藏内容，稍后通过Javascript显示

Markup hidden content to be displayed later via Javascript

本文关键字：Javascript 显示 隐藏      更新时间：2023-09-26

我有一些这样的段落：

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a> firm communications and setting up interviews.</p>
<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>

在我阅读更多的地方，我希望所有后续文本都被隐藏，然后当我用Javascript激活链接时，它会显示出来。我本来打算在这段文字的其余部分加上class="hiddencontent"之类的SPAN，但现在我意识到，既然我有第一段的其余部分，再加上整个第二段，那么建议用什么方法来标记它？显然，一个SPAN元素不可能是两个不同段落的一部分。

注意，这个页面上会有多个这样的阅读更多段落，所以我不能只做一个全面的$（'.hiddencontent'）.show（）；在页面中的所有内容上。

谢谢！

我只需要将相关段落包装在类似div的元素中，创建一个隐藏类（例如.hidden），并将该类应用于任何想要隐藏的内容。最简单的方法是将链接后面的文本包装在一个跨度中，并将隐藏类应用于该跨度及其后面的段落：

<div>
    <p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a>READ MORE</a><span class="hidden"> firm communications and setting up interviews.</span></p>
    <p class="hidden">Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing firm communications and setting up interviews.</p>
</div>

你可以使用这个jQuery来显示"额外的"

$('a').click(function () {
    $(this).closest('div').find('.hidden').toggle()
})

jsFiddle示例

试试这样的东西：

<p>Is your organization prepared for a crisis? Most professional service firms have a process for dealing with the media. There are systems in place for sending out press releases, issuing <a class="content-hider">READ MORE</a><span class="extra-content" style="display:none;"> firm communications and setting up interviews.</span></p>

和

$('a.content-hider').click(function () {
    $(this).siblings('span.extra-content').show();
    $(this).hide();
});

如果这是你想要的效果，那么在重新加载页面之前删除超链接是否有效果？

尝试我的函数，并根据您的需要对其进行修改（注意：您需要jquery）。

    <?php
    $text="your_text";// your text
    $post_id="1";// a unique number to make sure that when a read more link is clicked all the .second parts are not shown,only the one which has the same number will be shown.
    function read_more($text,$post_id)
    {
        if(strlen($text) > 150)//if the text is greater than 150 characters 
        {
           //cut the string in 2 parts
           $first_part = substr($initial_cap_sin, 0, 150);//first part
           $second_part = substr($initial_cap_sin,150);//second part
           $final_text = ' <!---first part-------->
                           <span class="first_part">'.$first_part.'</span>
                           <!----second part------>
                           <span class="second_part" id="second_part'.$post_id.'">'.$second_part.'</span> 
                           <!----read more link--->
                           <span class="read_more_link" rel="'.$post_id.'">... Read More</span>';
        }
        else
        {
        $final_text=$text;// else if the text is not greater than 150 characters dont do any thing
        }
    }
    echo read_more($text);//send the text to the readmore function for processinf
    ?>
    <script>
    $(document).on('click',".read_more_link",function(){
        var read_m_id = $(this).attr("rel");
        $("#second_part"+read_m_id).fadeIn();
        $(this).hide('fast')
    });
    </script>
相关文章：