Question

我有一个来自Bootstrap 4的手风琴，当我点击任何手风琴的标签页面滚动到它的部分时，我想要它。

$('.toggling-tabs').on('click', function () {
    if ($('.sections').hasClass('collapsing')) {
        $('html, body').animate({
                scrollTop: $('.sections').offset().top
            },
            'slow');
    }
});

我得到了这个jQuery snippet，它只适用于手风琴的一个标签。 .toggling-tabs是手风琴标签的类，.sections是按下任何标签时页面应滚动到的部分的类。

如果使用JS或jQuery单击任何选项卡，如何使代码适用于所有选项卡。

更新

<div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
    <div class="port-item p-4 bg-primary" data-toggle="collapse" data-target="#home">
        <i class="fa fa-home d-block pb-2"></i> Home
    </div>
</div>

<!-- Some stuff in between -->


<section class="collapse show sections" id="home">
   <div class="card card-body bg-primary text-white py-5 banner">
      <h2>Welcome to my portfolio</h2>
    </div>
</section>

<section class="collapse collapsing sections" id="resume">
    <div class="card card-body bg-success text-white py-5">
        <h2>My Resume</h2>
    </div>
</section>

Answer 1

假设您在data-target项目上使用.toggling-tabs属性，则可以通过$(this).data('target')在事件处理程序中获取目标。你可以通过id滚动到元素现在，要使切换按预期工作，请通过javascript执行并从标记中删除data-toggle属性。以下是一个工作示例。

＆＃13;

$('.toggling-tabs [data-target]').on('click', function(event) {
    var target = $(this).data('target');
    
    $('.collapse:not(' + target + ')').collapse('hide');
    $(target).collapse('show');

    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 'slow');
});

＆＃13;

#placeholder {
    height: 150vh;
    background-color: light-grey;
}

＆＃13;

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
            <div class="port-item p-4 bg-primary" data-target="#home">
                <i class="fa fa-home d-block pb-2"></i> Home
            </div>
        </div>

        <div class="col-lg-3 col-md-6 col-sm-12 toggling-tabs">
            <div class="port-item p-4 bg-success" data-target="#resume">
                <i class="fa fa-home d-block pb-2"></i> Resume
            </div>
        </div>
    </div>
</div>

<div id="placeholder">
</div>

<section class="collapse sections" id="home">
   <div class="card card-body bg-primary text-white py-5 banner">
      <h2>Welcome to my portfolio</h2>
    </div>
</section>

<section class="collapse sections" id="resume">
    <div class="card card-body bg-success text-white py-5">
        <h2>My Resume</h2>
    </div>
</section>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

$('.toggling-tabs').on('click', function () {
  $('html, body').animate({
    scrollTop: $('.sections').offset().top
  },
  'slow');  
});

在你的代码中检查它是否有类删除我删除了所以现在它将适用于所有类部分

滚动顶部多个元素

2 个答案: