以下JavaScript行如何工作？

Question

我遇到了以下代码：

使用Javascript：

var ElementClicked = document.getElementById(IdClicked);
ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

CSS：

div.hidden{
height: 500px;
}

div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}

HTML包含两个div：

<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >

作者用第一个div调用JavaScript函数。

我无法清楚地理解JavaScript函数正在做什么。我知道条件运算符是什么以及它是如何工作的。

有人能简单解释一下这个功能基本上是做什么的吗？

Answer 1

它切换隐藏的类。如果className为'hidden'，则现为''。如果是其他任何内容，现在是'hidden'。

Answer 2

使用三元运算符ElementClicked在'hidden'和''之间切换变量?的类。

Answer 3

var ElementClicked = document.getElementById(IdClicked);

ElementClicked 指向指向 div ，ID = IdClicked 。

ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

如果ElementClicked 拥有类＆＃34;隐藏＆＃34;，则不会添加任何内容。其他代码添加了类＆＃39;隐藏＆＃39;到ElementClicked。

简而言之，此代码将类hidden添加到ElementClicked。执行JS代码时，id = IdClicked的元素会获得类hidden。

Answer 4

如果我逐行解释，

ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden';

此条件运算符检查是否隐藏，n是否将其状态更改为＆＃39;＆＃39;。

现在，

div.hidden{
height: 500px;
}

div{
height: 0px;
-webkit-transition: height 0.5s;
transition: height 0.5s;
overflow: hidden;
}

是美化的css代码，并将其设置为隐藏

，最后一个是分区有主页的HTML代码

<div id="homepage" class='hidden'>
.
.
.
<div id="intro_page" >