Question

我有一个使用Bootstrap-4和CSS的手风琴。一切都按文档中的说明完美运行。我有一个要解决的可用性问题。每张卡在手风琴中都有大量内容。当用户单击任何手风琴按钮时，第一个交互会正确打开，但是随后的单击以打开其他部分将使手风琴滑动，但屏幕位置不会跟随（当某部分折叠时，它会将新的部分滑动打开，但将屏幕留在中间新内容，迫使用户向上滚动）。

如果可能，我希望屏幕滚动到新打开的部分的卡片标题类。任何帮助，将不胜感激。

我是UX设计师/美术师，我的HTML和CSS技能已经足够，但是我没有能力自己编写一个复杂的JavaScript循环（我的背景中只有JavaScript类简介）。

<div class="accordion" id="myAccordion">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">1. What is HTML?</button>
            </h2>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#myAccordion">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">2. What is Bootstrap?</button>
            </h2>
        </div>
        <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#myAccordion">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingThree">
            <h2 class="mb-0">
                <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">3. What is CSS?</button>
            </h2>
        </div>
        <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#myAccordion">
            <div class="card-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

更新我发现了一个使用JavaScript的简单解决方案：

$("#myAccordion").on("shown.bs.collapse", e => {
  $("html, body").animate({
      scrollTop: $(e.target)
        .prev()
        .offset()
        .top
    },
    400
  );
})

现在我还有一个问题，JavaScript在“打开”完成时运行，是否有办法让JavaScript在点击时运行，以便在与“打开”同时滚动？

Bootstrap Accordian-滚动屏幕是否具有新部分的展开或折叠（在初始单击之后）？

0 个答案: