Javascript 基于id的折叠div
我见过几个类似的问题,但找不到适合我的解决方案。我需要标题容器外部的折叠内容。我的基本设置是这样的Javascript 基于id的折叠div,javascript,jquery,Javascript,Jquery,我见过几个类似的问题,但找不到适合我的解决方案。我需要标题容器外部的折叠内容。我的基本设置是这样的 <div id="buttonRow"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="row collapse-row" id="rowOne">
<div id="buttonRow">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row collapse-row" id="rowOne">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header One</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowTwo">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Two</p>
</div>
</div>
</div>
</div>
<div class="col-md-4 collapse-row" id="rowThree">
<div class="row">
<div class="col-sm-12 col-custom vertical-align">
<div id="about-text">
<p>Header Three</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 d-none" id="ContentOne">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentTwo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="col-md-12 d-none" id="ContentThree">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</div>
我想尝试避免的是为每次崩溃编写单独的代码。我想以某种方式使用id使正确的内容折叠。实现这一目标的最佳方式是什么
此外,我在页面顶部的导航中也有相同的标题。单击这些图标时,它应该向下滚动并折叠相应的图标。因此,我也必须以某种方式融入其中
我已经创建了一个基本结构的演示
如有任何建议,将不胜感激
谢谢实现这一点的一种方法是通过在标题元素上使用。数据属性将保存目标元素id。对JS的一个小调整允许在行上切换d-none类。更新 更新HTML。请注意数据目标id属性。
标题一
在文档中多次出现。id
必须是唯一的。请尝试一些方法并用特定问题编辑您的问题。更多关于这个
$('.collapse-row').click(function() {
var id = $(this).attr("id");
alert(id)
});