javascript - 使用 javascript 在 Bootstrap 面板中阅读更多内容

Question

我正在使用 Bootstrap 面板来显示数据，并且有一个 description 字段，我正在面板主体中显示它

我想为面板正文中的description 字段实现read more 和read less 链接

这是我到目前为止所做的

function readmore(data){


if (data.length > 100) {

    // truncate string
    datacut = data.substring( 0, 50);

    // make sure it ends in a word so assassinate doesn't become ass...
    data2 = datacut + '<span id="restOfArticle" style="display:none">'+ data.substring( datacut.length, data.length);+'</span>'  ;
    return data2 + '<a onclick=showMoreOrLess(this,"restOfArticle") >..Read more</a>';
    }
    return data;
}

function showMoreOrLess(thisObj,bonusContent){
  var caption = thisObj.innerHTML;
  //alert(caption);
    if ( caption == "..Read more" ) {
      document.getElementById(bonusContent).style.display = "inline";
      thisObj.innerHTML = "..Read less";
    } else {
      document.getElementById(bonusContent).style.display = "none";
      thisObj.innerHTML = "..Read more";
    }
}

Read more and read less 工作正常，但它不是在隐藏内容完成后立即出现，而是在新的 div 中，当我单击 read more 时，它​​会折叠面板主体

下面是我如何使用 jquery 和 webservice 显示 html 数据

<div class="panel-group" id="accordion">

<div data-toggle="collapse" href="#collapse0" class="panel panel-default panel-style row event-row" id="panel0">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">test</h4>

        <div class="pull-right">
            <button type="button" id="5" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i5" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse0" class="panel-collapse collapse">
        <div class="panel-body">
            <div><p>test<strong>&nbsp;description</strong></p>
            </div>
            <div>
                <button id="5" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>00 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>
<div data-toggle="collapse" href="#collapse1" class="panel panel-default panel-style row event-row collapsed"
     id="panel1" aria-expanded="false">
    <div id="event-title" class="panel-heading event-heading"><h4 class="panel-title">show jumping test 1</h4>

        <div class="pull-right">
            <button type="button" id="10" onclick="checkinEvent(this)" class="checkin-btn btn btn-xs btn-danger"><i
                    id="i10" class="glyphicon glyphicon-plus"></i> Check in
            </button>
            <span class="label label-default badge-round pull-right label-checkin">1 </span></div>
    </div>
    <div id="collapse1" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
        <div class="panel-body">
            <div><p><strong>This is a very long description written<span id="restOfArticle" style="display:none"> just to test the word wrap and make it more compatible with the mobile screen. ThisIsAVeryVeryLongWordWrittenToTestWordWrapCSSIHopeItWorks</span></strong>
                </p>
                <a onclick="showMoreOrLess(this,&quot;restOfArticle&quot;)">..Read more</a></div>
            <div>
                <button id="10" data-toggle="modal" data-target="#myModal" type="button"
                        class="btn btn-danger btn-sm location-btn center-block"><span
                        class="glyphicon glyphicon-map-marker"></span>500 Piter Street, New South Wales,
                    Australia
                </button>
            </div>
        </div>
    </div>
</div>

我应该怎么做才能保持那个 body 打开并显示数据

谢谢

Answer 1

我将提供一个您可以采用的简单解决方案。检查此 code 一个:http://jsfiddle.net/c7pcu5gy/