Fatal编程技术网
  • javascript/
  • Javascript 如何编写js手风琴面板的紧密链接？

Javascript 如何编写js手风琴面板的紧密链接？

javascript html css

Javascript 如何编写js手风琴面板的紧密链接？,javascript,html,css,Javascript,Html,Css,我有很多内容，而且面板很长。我想选择关闭每个面板分别与关闭在该面板内的底部链接。我正在使用以下动画手风琴代码： 如何更改脚本/css以使关闭链接正常工作？我不想为此使用jQuery <!DOCTYPE html> <html> <head> <style> button.accordion { background-color: #eee; color: #444; cursor: pointer; padding

我有很多内容，而且面板很长。我想选择关闭每个面板分别与关闭在该面板内的底部链接。我正在使用以下动画手风琴代码：

如何更改脚本/css以使关闭链接正常工作？我不想为此使用jQuery

<!DOCTYPE html>
<html>
<head>
<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;
}
</style>
</head>
<body>

<h2>Animated Accordion</h2>

<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>
  <p><a href="#" class="close">Close</a></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>
  <p><a href="#" class="close">Close</a></p>
</div>

<button class="accordion">Section 3</button>
<div id="foo" 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>
  <p><a href="#" class="close">Close</a></p>
</div>

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

</body>
</html>


手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
按钮。手风琴。激活，按钮。手风琴：悬停{
背景色：#ddd；
}
分区小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡：0.6s缓进缓出；
不透明度：0；
}
div.panel.show{
不透明度：1；
最大高度：500px；
}
动画手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i
您必须使用class
关闭所有元素，然后将单击连接到每个元素，单击应转到父面板并删除class
活动的
，我想您正在寻找：


var closes = document.getElementsByClassName("close");

for (var j = 0; j < closes.length; j++) {
    closes[j].onclick = function(){
        this.parentElement.parentElement.classList.remove("show");
    }
}



动画手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作















您必须使用class
关闭所有元素，然后将单击连接到每个元素，单击应转到父面板并删除class
活动的
，我想您正在寻找：


var closes = document.getElementsByClassName("close");

for (var j = 0; j < closes.length; j++) {
    closes[j].onclick = function(){
        this.parentElement.parentElement.classList.remove("show");
    }
}



动画手风琴
第一节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第二节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作



第三节
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作















请添加演示链接或创建小提琴。请添加演示链接或创建小提琴。您好，扎卡里亚-我刚刚注意到这一点，单击“关闭”后，按钮/标题保持活动状态bg颜色（深灰色）。有没有办法让它回到初始状态（浅灰色）？如果没有，没什么大不了的。TiaZakaria-您建议在哪里学习javascript？又是蒂娅！Zakaria-页面刷新后是否有javascript保持打开的面板打开？您可以使用
cookies
的
localStorage
在客户端存储面板的状态，然后在刷新后获取状态并根据此状态打开/关闭面板。我不知道如何操作-是否有在线示例可供我建模？嗨，Zakaria-我刚刚注意到这一点，单击“关闭”后，按钮/标题保持活动状态bg颜色（深灰色）。有没有办法让它回到初始状态（浅灰色）？如果没有，没什么大不了的。TiaZakaria-您建议在哪里学习javascript？又是蒂娅！Zakaria-页面刷新后是否有javascript保持打开的面板打开？您可以使用
cookies
的
localStorage
在客户端存储面板的状态，然后刷新后获得状态，并根据此状态打开/关闭面板。我不知道如何操作-是否有在线示例可供我建模？