Question

我正在尝试在此手风琴的面板div中添加一个关闭按钮，我尝试搜索，但没有任何建议适用于此特定代码。我是个菜鸟。

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

Answer 1

就个人而言，我会删除你在那里的JS并使用jQuery .fadeIn和.fadeOut。对于您想要实现的目标，它会更容易。点击fadeIn() .panel，点击fadeOut() .panel。在HTML中添加某种关闭元素，以便fadeOut()解决问题。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

这是您正在寻找的基本概念吗？

为JS手风琴添加关闭按钮

1 个答案: