gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 03:07:41 25 4
gpt4 key购买 nike

我想在单击那个绿色箭头时显示一个弹出窗口。然后,当再次单击它时,隐藏该弹出窗口。我在下面编写了代码,但它突然隐藏了。我该如何修复它。仅使用 javascript 而不是 jquery ..

我的 fiddle : http://jsfiddle.net/t5Nf8/213/

请大家帮帮我

最佳答案

您必须将 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;
}

fiddle :http://jsfiddle.net/t5Nf8/215/

关于javascript - 单击箭头时如何停止弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30136855/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com