向JS手風琴添加一個關閉按鈕

Question

我試圖在此手風琴的面板div內添加一個關閉按鈕，我嘗試搜索，但沒有任何建議適用於此特定代碼。我是一個noob。

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate

Answer 1

就個人而言，我會刪除你那裏的JS和使用jQuery .fadeIn和.fadeOut。對於你想要達到的目標，它會容易得多。 fadeIn().panel on點擊和​​.panel點擊。在​​的HTML中添加某種關閉元素即可解決問題。

$('.accordion').click(function() { 
 
    $('.panel').fadeIn(); 
 
}); 
 
$('.close').click(function() { 
 
    $('.panel').fadeOut(); 
 
});

button.accordion { 
 
    background-color: #eee; 
 
    color: #000; 
 
    padding: 18px; 
 
    width: 100%; 
 
    border: none; 
 
    transition: 0.4s; 
 
} 
 
button.accordion:hover { 
 
    background-color: #ccc; 
 
} 
 

 
.panel { 
 
    transition: max-height 0.2s ease-out; 
 
    display: none; 
 
} 
 

 
.close:hover { 
 
    cursor: pointer; 
 
    color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="accordion">Section</button> 
 
<div class="panel"> 
 
    <p class="close">Close</p> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
</div>

這是你要尋找的一個基本的想法？