jQuery scrollTop和折叠div

时间:2018-08-28 23:00:53

标签: javascript jquery

我有一个名为data-target-id="ContentOne"的标头和一个ID为ContentOne的隐藏div

<div id="buttonRow">
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="row collapse-row" data-target-id="ContentOne">
                    <div class="col-sm-12 col-custom vertical-align">
                        <p>Header One</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 d-none" id="ContentOne">
                <p>1 -Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
            </div>
        </div>
    </div>
</div>

单击标题后,隐藏的div滑入。

$('.collapse-row').click(function() {
    $header = $(this);
    $content  = $("#" + $(this).data("target-id"));
    $(".collapse-content").not($content).slideUp();
    $content.slideToggle(500);
});

在完整的代码中,我有多个头/隐藏的div,这就是为什么我首先关闭所有打开的div的原因。

无论如何,这都很棒。但是,我最近在页面上添加了一些导航。 JSFiddle显示了我的布局。如果向下滚动页面,则单击该页面可以看到标题。我在导航链接中添加了一个scrollTop,该链接似乎有效。但是如何使它通用,使其与其他链接一起使用?另外,一旦div向下滚动到位置,我又如何使div折叠?因此,我实质上是在尝试复制我正在使用的div扩展,但是这次使用导航作为触发器。

谢谢

0 个答案:

没有答案