如何阻止此CSS手风琴自动向下滚动？

时间：2019-05-17 10:44:44

标签： jquery html5 css3 user-interface user-experience

我正在将CSS和jQuery制成的手风琴用于我正在制作的网站。该网站还使用Bootstrap对其其他部分进行样式设置。

每次我打开或关闭标签页时，由于某种原因页面会自动向下滚动，我该如何更改？谢谢大家。

$(document).ready(function() {
  $("a.accordion__trigger").click(function() {
    $(this).parent().find(".accordion__content").toggleClass("accordion__content__hidden");
  });
});
.final__accordion {
  position: relative;
  display: block;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
}

.final__accordion .accordion__item {
  display: block;
  margin-top: 5px;
}

.final__accordion .accordion__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  height: 0;
  -webkit-transition: height 1s ease, padding 0.3s linear;
  -o-transition: height 1s ease, padding 0.3s linear;
  transition: height 1s ease, padding 0.3s linear;
}

.final__accordion .accordion__content p {
  padding: 20px;
  margin: 0;
  text-align: left;
  max-width: initial;
}

.accordion__item .accordion__content {
  overflow: hidden;
  box-sizing: content-box;
  -moz-box-sizing: content-box;
}

.final__accordion .accordion__content__hidden:target {
  /*CHANGED TARGET ON TOGGLE CLASSNAME*/
  height: 150px;
  text-align: left;
}

.accordion__content__hidden {
  height: 0;
}

.final__accordion .accordion__trigger {
  text-decoration: none;
}

.final__accordion .accordion__title {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px;
  font-size: 1em;
  background-color: rgb(234, 10, 42);
  color: #FFFFFF;
  border: 1px solid red;
  cursor: pointer;
}

.final__accordion .accordion__title:hover {
  background-color: red;
}

.final__accordion .accordion__title:after {
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="final__accordion" id="#accordion">
  <div class="accordion__item">
    <a href="#final__tab1" class="accordion__trigger accordion__title">Accordion 1</a>
    <div id="final__tab1" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab2" class="accordion__trigger accordion__title">Accordion 2</a>
    <div id="final__tab2" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab3" class="accordion__trigger accordion__title">Accordion 3</a>
    <div id="final__tab3" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab4" class="accordion__trigger accordion__title">Accordion 4</a>
    <div id="final__tab4" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab5" class="accordion__trigger accordion__title">Accordion 5</a>
    <div id="final__tab5" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="accordion__item">
    <a href="#final__tab6" class="accordion__trigger accordion__title">Accordion 6</a>
    <div id="final__tab6" class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
</div>

1 个答案:

答案 0 :(得分：0)

  1. 单击<a>锚标记时，默认行为是跳转到href值所确定的位置。因此，所有<a>都具有href="#/"，这实际上可以防止这种跳跃行为。

  2. 使用jQuery时，您需要使用#id的时间占0.01％，而.class的时间占99.99％。因此所有#id都被删除了。

  3. 对于诸如滑动之类的动画效果，有.slideUp/Down/Toggle()

  4. 手风琴的行为是一次只能打开一个区域。因此，除点击的.content之后的.content（即.trigger）之外的所有$(this)都将.slideUp()。然后，在点击的.content之后的.trigger将.slideToggle()。

  5. .open在.toggleClass()上是.title，以使箭头动画。

顺便说一句，我从所有班级中删除了.accordion__部分，以节省理智，如果需要，可以随时用.accordion__使其混乱。

$(".trigger").on('click', function(e) {
  $('.title').not($(this)).removeClass('open');
  $(this).toggleClass('open');
  $('.content').not($(this).next('.content')).slideUp();
  $(this).next('.content').slideToggle();
});
body {
  overflow-y: scroll
}

.accordion {
  position: relative;
  border: 1px solid #e0e0e0;
  font-size: 0.8rem;
}

.accordion .item {
  margin-top: 5px;
}

.accordion .content {
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.5);
  overflow: hidden;
  box-sizing: content-box;
  height: 150px;
}

.accordion .content p {
  padding: 20px;
  margin: 0;
  text-align: left;
  max-width: initial;
}

.content.hidden {
  display: none;
}

.accordion .trigger {
  text-decoration: none;
}

.accordion .title {
  position: relative;
  display: block;
  margin: 0;
  padding: 10px;
  font-size: 1em;
  background-color: rgb(234, 10, 42);
  color: #FFFFFF;
  border: 1px solid red;
  cursor: pointer;
}

.accordion .title:hover {
  background-color: red;
}

.accordion .title::after {
  position: absolute;
  top: calc(50% - 12px);
  right: 20px;
  width: 15px;
  height: 15px;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  transform: rotate(-135deg);
  transition: 0.7s;
  content: "";
}

.accordion .title.open::after {
  transform: rotate(-45deg);
  transition: 0.7s;
}
<div class="accordion">
  <div class="item">
    <a href="#/" class="trigger title">Accordion 1</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="item">
    <a href="#/" class="trigger title">Accordion 2</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="item">
    <a href="#/" class="trigger title">Accordion 3</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="item">
    <a href="#/" class="trigger title">Accordion 4</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="item">
    <a href="#/" class="trigger title">Accordion 5</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
  <div class="item">
    <a href="#/" class="trigger title">Accordion 6</a>
    <div class="content hidden">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor laborum, rerum quasi rem placeat quo ratione qui.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

相关问题
最新问题