我想在点击绿色箭头时显示一个弹出窗口。然后,当它再次被点击时,隐藏弹出窗口..我在下面编写了编码,但它突然隐藏了......我如何解决它...只使用javascript而不是jquery ..
My fiddle:
http://jsfiddle.net/t5Nf8/213/
请有人帮助我
答案 0 :(得分:2)
您必须为onclick
定位arrow-down
,而不是rightone li ul
试试这段代码:
var log1 = document.querySelector('.arrow-down');
var log2 = document.querySelector('.rightone li ul');
log1.onclick = function() {
var display = getComputedStyle(log2).getPropertyValue("display");
if ( display !== "block" ) {
log2.style.display = 'block';
} else {
log2.style.display = 'none';
}
};
.rightone, .arrow-down, .rightone li ul{float:right;}
.rightone ul
{
list-style: none;
padding: 0px;
margin: 0px;
}
.rightone ul li
{
display: block;
position: relative;
}
.rightone li ul
{
display: none;
}
.rightone ul li a
{
display: block;
padding: 2px 30px ;
text-decoration: none;
white-space: nowrap;
}
.rightone ul li li
{
background-color:pink;
border-radius:2px;
padding: 2%;
}
.rightone ul li a:hover
{
color:#0ef2c4;
}
.rightone li ul
{
padding-top:20px;
}
.rightone li:hover a
{
color:black;
}
.rightone li:hover li a:hover
{
color:#0ef2c4;
}
.arrow-down {
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #0ef2c4;
cursor: pointer;
margin-right:50px;
}