标记隐藏的内容，以便以后通过Javascript显示

Question

我有一些这样的段落：

<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>

在我想阅读更多的地方，我希望所有后面的文本都隐藏起来，然后在我用Java激活链接时将显示它。 我打算在该段落的其余部分中放置带有class =“ hiddencontent”或其他内容的SPAN，但是现在我意识到，因为我拥有第一段的其余部分以及整个第二段，所以推荐的方法是标记这个吗？ 显然，单个SPAN元素不能属于两个不同的段落。

请注意，此页面上将有多个这样的READ MORE段落，因此我不能只执行全面的$（'。hiddencontent'）。show（）;。 在页面上的所有内容上。

谢谢！

Answer 1

我只是将相关段落包装在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示例

Answer 2

尝试这样的事情：

<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();
});

如果您要这样做，那么在重新加载页面之前删除超级链接是否有效？

Answer 3

尝试我的功能并根据需要对其进行修改（注意：您需要使用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>