我创建了一个更多按钮来切换段落。
我使用默认的bootstrap类进行崩溃。
类it("should initialise controller", (done) => {
var renderStub = sinon.stub(View.prototype, 'render');
// for each view.render() call, return resolved promise with `undefined`
renderStub.returns(Promise.resolve());
bus.subscribe("INITIALIZED", (message, payload) => done());
new Controller();
//make assertions...
//restore stubbed methods to their original definitions
renderStub.restore();
});
似乎没有进行CSS转换。
继承人的代码链接
http://codepen.io/theMugician/pen/YNWmWK
collapsing答案 0 :(得分：1)
您正在添加collapsing课程并立即将其删除。第二个问题是collapse类具有来自Bootstrap CSS的display: none，并且您无法为显示属性设置动画。
您可以将代码简化为以下内容：
CSS：
.collapse {
display: block;
transition: height 1s ease;
height: 0;
overflow: hidden;
}
.collapse.in {
height: 200px;
}
JS：
var readBlock = $('#read-block-1');
$("#read-more-1").click(function() {
if (readBlock.hasClass("in")) {
readBlock.removeClass('in');
} else {
readBlock.addClass("in");
}
});
此解决方案并不完美，因为它会将折叠的内容分解为下一行。
为避免您可以转换整个段落（设置段落的高度，例如50px，当您单击按钮时，将其更改为例如200px）。
HTML：
<p class="collapse">..........</p>
<a id="read-more-1">read more</a>
CSS：
.collapse {
display: block;
transition: height 1s ease;
height: 50px;
overflow: hidden;
}
.collapse.in {
height: 200px;
}
JS：
var readBlock = $('p');
$("#read-more-1").click(function() {
if (readBlock.hasClass("in")) {
readBlock.removeClass('in');
} else {
readBlock.addClass("in");
}
});
答案 1 :(得分：1)
您可以在父容器上设置溢出，使用line-height来控制容器的高度和行数。
你可以使用max-height而不是height，因此它不会在需要的时候增长。
最后，只需切换将添加高度或最大高度的类。
例如
$(document).ready(function() {
$("#read-more-1").click(function() {
$(".collapse").toggleClass('in');
})
})p {
max-height: 1.6em;
line-height: 1.6em;
padding: 0;
overflow: hidden;
transition: max-height 1s ease;
}
.in {
max-height: 48em;/* 1.6 x lines max here an average 30 lines */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="collapse">A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the ring band, hardwood fitted base and cover with agate
finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to
health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A
new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720).
The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's
peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this
time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</p>
<a id="read-more-1">read more</a>
答案 2 :(得分：0)
折叠课程是不必要的。您所需要的只是切换高度以触发转换。此外，文本需要是一个块元素才能使高度属性得到尊重
$(document).ready(function() {
$("#read-more-1").click(function(){
$("#read-block-1").toggleClass('in');
})
}).collapsable {
position: relative;
height: 0;
overflow: hidden;
-webkit-transition: height 0.35s ease;
-o-transition: height 0.35s ease;
transition: height 1s ease;
display: block;
}
.collapsable.in {
height: 150px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the <span class="collapsable" id="read-block-1">ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf</span></p>
<a id="read-more-1">read more</a>
答案 3 :(得分：0)
只需使用BS collapse.js插件即可。这就是它的用途。
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div>A rare Peking glass tripod censer, Qianlong Period, of stout globular form with carved lion and ring handles, tripod stylized animal head feet and waisted neck rising to a rim with bail handles, the
<div class="collapse" id="collapseExample">
ring band, hardwood fitted base and cover with agate finial. Provenance:Previously from the collection of Carl Lindgren (1843-1871) a Swedish Sea Pilot and Businessman Carl Lindgren (1843-1871). He came to Taku close to Tianjin in 1863, at that time China's most important port north of Shanghai. Due to health problems Carl Lindgren left China in November 1870 and died in London during the spring 1871. This glass censer was among the things collected by his family after his death. By descent within the family. From a Montreal Collector Lot notes:"A new chapter in the history of Chinese glassmaking began in 1696, the thirty-fifth year of the reign of Kangxi, when a glass factory was established within the imperial city in Beijing under the direction of the Jesuit missionary Kilian Stumpf (1655-I720). The type of glass produced there, of which this vase is an example, was subsequently known in the West as Peking glass. Craftsmen were recruited from Boshan, the traditional center of glassmaking in China, and from Guangzhou (Canton). The workshop's peak period, in both quantity and quality of its wares, was between 1740 and 1760, in the early reign of the Qianlong emperor. Palace records show that Jesuits with expertise in certain Western glassmaking techniques were active in the workshop at this time. After 1760, glass production in the palace workshop declined rapidly, as did the quality of the wares." -Metropolitain Museum New York Bulletin. 3269166.pdf.bannered.pdf
</div>
</div>
<a type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
read more
</a>