Question

关注this post关于如何为文本部分设置“阅读更多”，以及this post设置两个并排div之后，我遇到了一个问题左浮动div工作正常 - 单击“Read More”显示div中的其余文本，反之亦然“Read Less”。但是，第二个div不能按预期工作 - 单击“Read More”会隐藏第二个div的文本，同时也会更改第一个div的省略号。

更清楚地说明：

//Script for Read More/Read Less
<script>
    $(document).ready(function() {
        var showChar = 200;
        var ellipsestext = "...";
        var moretext = "Read More";
        var lesstext = "Read Less";
        $('.more').each(function() {
            var content = $(this).html();

            if(content.length > showChar) {

                var c = content.substr(0, showChar);
                var h = content.substr(showChar-1, content.length - showChar);

                var html = c + '<span class="moreelipses">'+ellipsestext+'</span><span class="morecontent"><span>' + h + '</span><div class="text-center margin_top_10"><a href="" class="morelink">'+moretext+'</a></div></span>';

                $(this).html(html);
            }

        });

        $(".morelink").click(function(){
            if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            } else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(".moreelipses").toggle();
            $(this).parent().prev().toggle();
            $(this).prev().toggle();
            return false;
        });
    });
</script>

<style>
    .comment {
        width: 100%;
        margin: 0 auto;
    }
    a.morelink {
        outline: none;
        color: #5bc0de !important;
    }
    .morecontent span {
        display: none;

    }
</style>

//First Div
<div class="container" style="width:620px; float:left;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </div>
    </div>
</div>
//Second Div
<div class="container" style="width:620px; float:right;">
    <div class="row">
        <div class="comment more col-lg-8 col-lg-offset-2 text-center">
            <p class="comment more">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</div>
<div style="clear:both">
</div>

结果：

如果两个div都没有展开，两者都显示正常。
如果展开div 1而div 2不展开，则div 1的文本会按预期展开。 Div 2保持不变。
如果展开div 2且div 1不展开，则div 2的文本保持收缩状态。 div的省略号（...）都消失了。
如果两个div都展开，div 1的文本会按预期展开，div 2的文本会保持缩小。 Div 1仍然显示其省略号。

Answer 1

你只需要整理代码......

这是小提琴：https://jsfiddle.net/bgssveqq/5/

部分JS：

$(".morelink").on("click", function() {
          if($(this).hasClass("less")) {
                $(this).removeClass("less");
                $(this).html(moretext);
            }
            else {
                $(this).addClass("less");
                $(this).html(lesstext);
            }
            $(this).parent().parent().children("p").children(".moreelipses").toggle();
            $(this).parent().parent().children("p").children(".morecontent").toggle();
        });

阅读更多脚本和并排div不能正常工作

1 个答案: