Question

由于以下链接，我设法创建了一个手风琴滑块：

我想知道是否可以更改手风琴滑块以滚动按钮上方的内容（从顶部）而不是按钮下方。我所创建的内容可以在以下内容中看到：

s116169771.websitehome.co.uk

但是在查看javascript时，我无法看到任何可以让我做出此更改的具体内容。

公平地说，我不确定这是否可以用这个特定代码完成，或者如果必须单独编写，但任何建议都会非常感激。

当前的JS代码

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>

先谢谢。

Answer 1

移动div面板下要显示的相应按钮

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>

然后从：

切换Javascript命令

this.nextElementSibling.classList.toggle("show");

为：

this.previousElementSibling.classList.toggle("show");

Answer 2

将div移到按钮上方

然后改变这个： nextElementSibling 至： previousElementSibling

<h2>Accordion</h2>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 1</button>

<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.previousElementSibling.classList.toggle("show");
  }
}
</script>

将Accordion Slider更改为向上滚动而不是向下滚动

2 个答案: