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>

我阅读更多内容我希望隐藏所有后续文本，然后当我使用Javascript激活链接时它会显示。我打算用一个带有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 example

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>

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

3 个答案: