向JS手风琴添加一个关闭按钮
问题描述:
我试图在此手风琴的面板div内添加一个关闭按钮,我尝试搜索,但没有任何建议适用于此特定代码。我是一个noob。向JS手风琴添加一个关闭按钮
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_animate
答
就个人而言,我会删除你那里的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>
这是你要寻找的一个基本的想法?
你的代码在哪里? – dippas
我的代码与我发布的代码完全相同,如果你可以给我一个例子,我可以让它工作。 – Vee