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

Question

我正在使用由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> 

Answer 1

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

2. 使用jQuery时，您需要使用#id .01％的时间和.class 99.99％的时间。 因此，所有#id均被删除。

3. 对于滑动等动画效果，有.slideUp/Down/Toggle()

4. 手风琴的行为是一次只能打开一个区域。 因此，除单击的.trigger的.content （即$(this) ）之外的所有.content都将是.slideUp() 。 然后，单击的.trigger的.content将是.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>