向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>

这是你要寻找的一个基本的想法？