问当我点击手风琴菜单时，如何阻止屏幕跳跃？
EN

Stack Overflow用户

提问于 2021-03-19 17:51:09

回答 1查看 331关注 0票数 0

我试图在我的网站上做一个常见问题，但当按下手风琴菜单中的问题时，屏幕会“跳”，这样答案就在屏幕的顶部。我怎么才能解决这个问题？我试图找到并解决这个问题，但我不知道是什么原因造成的。

您可以在这里看到完整的代码：https://codepen.io/Kxlly/pen/rNWEXqB

以下是总结的代码：

和CSS

html, body {
  min-height: 100vh;
  margin:auto;
}

main {
  padding: 4% 10% 4% 10%;
}

section {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

section h1 {
  text-align: center;
}

section h2 {
  padding-bottom: 20px;
  text-align: center;
}

.container {
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.accordion-item {
  background: #070707;
  border-radius: .4rem;
  margin-bottom: 3rem;
  padding: 1rem;
  box-shadow: 20px 19px 11px -7px rgba(0,0,0,0.38);
}

.accordion-link {
  font-size: 1.6rem;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  background-color: #070707;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

ion-icon {
  padding: .5rem;
}

.accordion-link .remove {
  display: none;
  scroll: none;
}

.answer {
  max-height: 0;
  overflow: hidden;
  position: relative;
  background-color: rgba(255,255,255,.08);
  transition: max-height 650ms;
}

.answer::before {
  content: "";
  position: absolute;
  width: .6rem;
  height: 90%;
  background-color: #73D2DE;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: rgba(255,255,255,.6)
}

.answer p {
  padding: 2rem;
}

.accordion-item:target .answer {
  max-height: 20rem;
}

.accordion-item:target .accordion-link .add {
  display: none;
}

.accordion-item:target .accordion-link .remove {
  display: block;
}

<html>
      <body>
        <main>
            <section>
                <div class="container">
                    <div class="accordion">

                        <div class="accordion-item" id="question1">
                            <a class="accordion-link" href="#question1">
                                Great question
                                <ion-icon name="add" class="add"></ion-icon>
                                <ion-icon name="remove" class="remove"></ion-icon>
                            </a>
                            <div class="answer">
                                <p>Great answer</p>
                            </div>
                        </div>
                        
                        <div class="accordion-item" id="question2">
                            <a class="accordion-link" href="#question2">
                                 Great question
                                <ion-icon name="add" class="add"></ion-icon>
                                <ion-icon name="remove" class="remove"></ion-icon>
                            </a>
                            <div class="answer">
                               <p>Great answer</p>
                            </div>
                        </div>

                        <div class="accordion-item" id="question3">
                            <a class="accordion-link" href="#question3">
                                Great question
                                <ion-icon name="add" class="add"></ion-icon>
                                <ion-icon name="remove" class="remove"></ion-icon>
                            </a>
                            <div class="answer">
                               <p>Great answer</p>
                            </div>
                        </div>

                    </div>
                </div>
          </section>
        </main>
        <script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
    </body>
</html>

html

css

回答 1

Stack Overflow用户

发布于 2021-03-19 18:43:26

这是因为在单击的元素的href属性中指定了要跳转的引用。

例如，单击一个值为“#质询-1”的元素将迫使页面跳转到ID为“问题-1”的元素。

考虑使用本地HTML元素和一种更简单、可访问的方法：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66713270

复制

相似问题

问当我点击手风琴菜单时，如何阻止屏幕跳跃？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我点击手风琴菜单时，如何阻止屏幕跳跃？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当我点击手风琴菜单时，如何阻止屏幕跳跃？
EN