Question

我已经看到了几个类似的问题，但是找不到适合我的解决方案。我需要标题容器外部的折叠内容。我的基本设置就像这样

<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>

因此，如果单击Header One，contentOne应该折叠等。我对Javascript的处理还不多，只需获取ID

$('.collapse-row').click(function() {
    var id  = $(this).attr("id");
    alert(id)
});

我想尝试避免的是为每个崩溃编写单独的代码。我想以某种方式使用ID折叠正确的内容。实现这一目标的最佳方法是什么？

此外，页面顶部导航中的标题也相同。单击这些按钮后，它应向下滚动并折叠相应的按钮。所以我也必须以某种方式使其适应。

我用基本结构创建了一个演示JSFiddle。

任何建议将不胜感激。

谢谢

Answer 1

一种实现此目的的方法是在标头元素上使用data-* attributes。数据属性将保留目标元素ID。通过对JS进行小的调整，可以在行上切换d-none类。更新了fiddle

更新HTML。注意data-target-id属性。

<div class="row collapse-row" data-target-id="ContentOne">
    <div class="col-sm-12 col-custom vertical-align">
         <div id="about-text">
              <p>Header One</p>
         </div>
     </div>
</div>

更新JS

$('.collapse-row').click(function() {
  var id  = $(this).data("target-id");
  $("#" + id).toggleClass("d-none");
});

根据ID折叠div

1 个答案: