Question

这是我的脚本：

function panelShow(index, code) {
    buttons.forEach(function(button){
        button.style.borderBottom="";
    });
    tabButtons[index].style.borderBottom="none";
    panels.forEach(function(panel){
        panel.style.display="none";
    });
    panels[index].style.display="block";
    panels[index].style.backgroundColor=code;
}

panelShow()采用index和code（颜色代码）之类的参数。例如panelShow(1, #0000);

如果第二次单击，我要还原样式并设置为panels[index].style.display="none";

如何这样做？请只使用VanillaJS。

谢谢。

Answer 1

尝试（答案针对问题this version）

let panels = [...document.querySelectorAll('.panel')];
panels.map(e=> e.ondblclick = e=> e.target.style.display="none" );

function panelShow(index, code) {
    // ...your code
    panels[index].style.display="block";
    panels[index].style.backgroundColor=code;
}

panelShow(0,"#ff0000");

<div class="panel">panel 1 contetn</div>
<div class="panel">panel 2 contetn</div>

如何在第二次点击时恢复样式？

1 个答案: