我使用 stackoverflow 已经有一段时间了,今天我有机会在这里提出我的疑问。希望问题早日得到解决。
所以基本上我是在尝试实现用于此站点上常见问题解答部分的功能:http://yourquestions.mcdonalds.ca/faq
我试图通过在 jquery 中使用 .hide 和 .slideToggle 函数和一点点 css 来复制设计,但我面临内容流的问题。当我单击第一个标题时,它运行正常但第二个标题(那里当我单击第二个标题时,左侧是空白区域)。
我的代码(Js fiddle):https://jsfiddle.net/o2e7d20h/
另外,我如何向代码中的每个 header 添加 +/-(或折叠/展开)并切换它(寻求帮助,因为我不擅长 jquery)。
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".heading").click(function() {
jQuery(this).next(".content").slideToggle(500);
});
});
.layer1 {
margin-left: 5%;
margin-right: 5%;
width: 90%;
}
.heading {
color: #fff;
cursor: pointer;
position: relative;
margin: 2%;
padding-bottom: 2em;
padding-top: 2em;
}
.content {
margin: 2%;
position: relative;
background-color: #fff;
position: relative;
color: #000 !important;
}
#boxes {
margin: 0;
padding: 0;
width: 50%;
max-width: 50%;
height: auto;
float: left;
text-align: center;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="layer1">
<div id="boxes">
<p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#E38D82; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#85D3A6; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#7cc0c4; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#b389ab; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#66afd3; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#b07689; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#D1422F; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#E38D82; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#32B36B; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#85D3A6; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#25969D; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#7cc0c4; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#813B73; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#b389ab; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#66afd3; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
<div id="boxes">
<p class="heading" style="background-color:#7C1B3B;color:#fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<div class="content" style="background-color:#b07689; text-align:justify;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim
quis quam rhoncus pretium. Mauris interdum finibus pharetra. Nulla efficitur, est eu accumsan consequat, dui est efficitur neque, at congue ante tortor eget purus. Mauris interdum convallis eros, mattis consectetur massa placerat ac. Maecenas
eleifend vulputate mattis. Pellentesque luctus dolor id consequat malesuada. Fusce vel nulla ut ante pulvinar aliquam non at diam. Nullam aliquam auctor egestas. Donec aliquam rutrum risus, ac malesuada nibh ultricies lobortis. Maecenas dapibus
nisl sem, et mollis velit fringilla sit amet. Curabitur luctus elit neque, id sodales nisi tempus sit amet. Praesent ut elementum nisl, et elementum nulla. Aenean dignissim sapien in nulla fringilla, quis accumsan urna suscipit. Nullam quis magna
mollis, vehicula purus at, rhoncus felis. Aenean tincidunt arcu quis cursus consectetur. Phasellus pellentesque pulvinar sem, vel efficitur tellus tempus at. Fusce urna nulla, suscipit vitae elementum at, maximus non velit. Phasellus tempor massa
eu ultricies ullamcorper. Nulla elementum nunc enim, in eleifend ligula interdum sed. Aliquam fringilla auctor feugiat. Sed scelerisque nisi sit amet dolor convallis laoreet. Curabitur ullamcorper eget ligula nec ullamcorper. Aenean laoreet felis
ullamcorper elementum eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec congue tristique ex, non hendrerit arcu consequat ac. Ut luctus sollicitudin quam, vel commodo ipsum faucibus a.
Vivamus non fermentum augue.</div>
</div>
</div>
感谢您对此的任何帮助...
最佳答案
首先,您为多个元素使用了“boxes”的 id
。您需要确保所有 id
都是唯一的。盒子之间似乎也没有适当的分隔。
我已经更新了你的 fiddle ,使用带有 box-section
类的 div
来分隔两组。
总而言之,您的 Html 现在如下所示:
<div class="box-section">
6 boxes
</div>
<div class="box-section">
6 boxes
</div>
关于jquery - 需要有关可折叠内容部分的帮助,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34968370/