Bootstrap 3折叠段落在折叠时删除“...”

Question

我正在尝试折叠一个段落，如果所有内容都折叠起来效果很好。

但我希望人们看到段落的开头后跟“...”这三个点。如果用户点击折叠按钮，他会看到整个内容，但“...”三个点必须消失。

<div class="container color-p">
    <p class="date-item"> 22. September 2015
        <button class="btn-custom pull-right" type="button" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
        </button>
    </p>
    <h1> Die Community und Ihre User </h1>
    <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet <span class="dots">...</span></p>
    <p class="collapse" id="collapseExample2"> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <hr>
</div>

这就是它在网站上的样子。在这张照片中它是折叠的，但我不知道如何删除这些点：

http://puu.sh/kb0Ce/b900d2fd62.png

非常感谢！

Answer 1

这可以使用一些简单的javascript来完成：

1) 为您的标签添加一个唯一的 ID。像

<span id="elipseSpan" class="dots">...</span>

2) 将display CSS 添加到此标签中以最初显示跨度。

.elipseSpan { display: block }

3) 为您的按钮添加“onclick”函数调用。

<button ... onclick="functionName" ... ></button>

4) 在单独的 javascript 文件中，或在 html 文件底部的标记内，创建一个 javascript 函数，该函数从按钮的 onclick 调用，该按钮抓取适当的标记并更改显示属性。

function functionName = {  
  var span = document.getElementById("elipseSpan");  
  if (span.style.display == "block"){  
    span.style.display = "none";  
  }  
  else if (span.style.display == "none") {  
    span.style.display = "block";  
  }
}

这是使用 javascript 解决此问题的一种非常基本的基本方法。使用诸如 Knockout 或 JQuery 之类的东西以及类似性质的东西，当然有更“有效”或“更清洁”的方法来处理这个问题，但我不会在这里讨论这些方法，因为这需要了解这些技术。如果您还没有学习 Knockout，我强烈建议您学习，因为这会使数据绑定变得更加容易。希望这可以帮助。如果您对此方法有任何疑问，请告诉我。

免责声明：我实际上并没有编写代码并对其进行测试，我只是想提供一个关于如何处理它的总体思路，但它应该可以工作......