点击它时如何隐藏div(How to hide div when I click on it)

点击它时如何隐藏div(How to hide div when I click on it)

我想创建一个手风琴，其中所有选项卡最初都关闭，每当我点击其中一个时，该特定选项卡打开，第二次单击它关闭。 我可以打开div1，但我不知道如何关闭它或如何概括开关。

我还创建了一个codepen示例，您可以看到我到目前为止所做的工作。 点击蓝色div，它应该打开隐藏的段落。

<http://codepen.io/anon/pen/qbMBXd>

[编辑：当一个标签打开并且我点击另一个标签时，第一个标签应该关闭，除了当前打开的标签之外的所有其他标签]

I would like to create an accordion, where all the tabs initially closed and whenever I click on one of them, that particular tab opens, on a second click it closes. I could open div1 but I don't know how to close it or how to generalize the openings and closings.

I also created a codepen example where you can see what I have done so far. Click on the blue div, it should open the hidden paragraph.

<http://codepen.io/anon/pen/qbMBXd>

[Edited: Also when a tab open and I click on another one, the first tab should be closed as all the others except the currently open one]

最满意答案

将您的javaScript更改为如下所示

function changeSize(x){ var div = document.getElementById(x); if (div.style.height == "50px"){ switch (div.id){ case("box1"): div.style.height = "auto"; document.getElementById("box2").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box2"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box3"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box2").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box4"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box2").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box5"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box2").style.height = "50px"; break; } } else { div.style.height = "50px"; } }

丑陋，但它做的工作。

只要单击div，就可以从html调用该函数

<div class="colorbox" id="box1" onclick="changeSize('box1')">

祝你好运

change your javaScript to look like this

function changeSize(x){ var div = document.getElementById(x); if (div.style.height == "50px"){ switch (div.id){ case("box1"): div.style.height = "auto"; document.getElementById("box2").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box2"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box3"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box2").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box4"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box2").style.height = "50px"; document.getElementById("box5").style.height = "50px"; break; case ("box5"): div.style.height = "auto"; document.getElementById("box1").style.height = "50px"; document.getElementById("box3").style.height = "50px"; document.getElementById("box4").style.height = "50px"; document.getElementById("box2").style.height = "50px"; break; } } else { div.style.height = "50px"; } }

Ugly but it does the job.

you can call the function from your html whenever the div is clicked

<div class="colorbox" id="box1" onclick="changeSize('box1')">

Good luck