如何在单击箭头时停止弹出窗口

时间:2015-05-09 06:36:04

标签: javascript html css

我想在点击绿色箭头时显示一个弹出窗口。然后,当它再次被点击时,隐藏弹出窗口..我在下面编写了编码,但它突然隐藏了......我如何解决它...只使用javascript而不是jquery ..

My fiddle: http://jsfiddle.net/t5Nf8/213/

请有人帮助我

1 个答案:

答案 0 :(得分:2)

您必须为onclick定位arrow-down,而不是rightone li ul

试试这段代码:

JS

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';
}
};

CSS

.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;
}

小提琴:http://jsfiddle.net/t5Nf8/215/