Question

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

但我希望人们看到段落的开头，然后是＆＃34; ...＆＃34;这3个点。如果用户点击折叠按钮，他会看到整个内容，但是＆＃34; ...＆＃34;三个点必须消失。

<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）添加＆＃34; onclick＆＃34;函数调用你的按钮。

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

4）无论是在单独的javascript文件中，还是在html文件底部的标签内，都可以创建一个javascript函数，该函数从按钮的onclick中调用，该按钮可以获取相应的标记并更改显示属性。 / p>

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解决此问题的一个非常基本的基本方法。肯定有更多＆＃34;高效＆＃34;或＆＃34;清洁＆＃34;使用诸如Knockout或JQuery之类的东西以及那种性质的东西来处理这个问题的方法，但我不会在这里采用这些方法，因为这需要了解这些技术。我强烈推荐学习Knockout，如果你还没有，因为这使得数据绑定变得更加容易。希望这可以帮助。如果您对此方法有任何疑问，请与我们联系。

免责声明：我实际上并没有对此进行编码并对其进行测试，我只是想提供一个如何处理它的一般概念，但它应该有用......

Bootstrap 3折叠段删除＆＃34; ...＆＃34;崩溃了

1 个答案: