2016-08-19 67 views
0

我已成功地創建一個手風琴滑塊得益於以下鏈接:更改手風琴滑塊向上滾動,而不是向下

w3schools.com

,我想知道是否有可能改變手風琴滑塊滾動按鈕上方的內容(從頂部開始)而不是按鈕下方。我已經創建了可以在下面可以看到:

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> 

在先進的感謝。

回答

1

移動,你想讓它顯示

股利面板下的相應按鈕
<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"); 
+0

非常感謝Danimal,我會給你一個去看看我如何。 – user3191160

+0

太棒了,正是我需要的。 – user3191160

0

移動上面的按鈕,而不是

,然後的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> 
+0

順便說一句有點厚臉皮我的,但反正是有,我可以做的箭頭按鈕控制開啓和關閉?而不是整個矩形..只是爲了我的學習。 – user3191160

+0

使用當前佈局否,但是這可以完成,但它涉及添加跨度,而不是使用css:after。 – krisph