javascript - 如何使用 onclick 更改可见性

Question

您好，我是 Javascript 的新手，由于没有用于 css 的 onclick，我需要一些帮助。

这是我的 html:

<div id="dropnav">
    <ul>
        <li><a>Navigation</a> 
            <ul>
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="Paintings.html">Paintings</a>
                </li>
                <li><a href="Contact.html">Contact</a>
                </li>
                <li><a href="Bio.html">Bio</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

这是我的CSS:

#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;

}
#dropnav ul {
padding:0px;
margin:0px;

}

#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;

}

#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}

#dropnav ul li a:hover {
background-color:#666666;
}

#dropnav ul li ul li {
width:99.8%;

}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;

}

#dropnav ul li ul {
visibility:hidden;
}

#dropnav ul li:onclick ul {
visibility:visible;
}

现在我需要 :onclick 才能工作，所以如果你能修复它那就太好了。感谢您的帮助

Answer 1

改变 onclick 可见性的一种方法是向您的 html 标记添加事件属性:

onclick="this.style.visibility='hidden';"

例如，这是带有消失链接的导航栏:

<div id="dropnav">
    <ul>
        <li><a>Navigation</a> 
            <ul>
                <li><a href="index.html" onclick="this.style.visibility='hidden';">Home</a>
                </li>
                <li><a href="Paintings.html" onclick="this.style.visibility='hidden';">Paintings</a>
                </li>
                <li><a href="Contact.html" onclick="this.style.visibility='hidden';">Contact</a>
                </li>
                <li><a href="Bio.html" onclick="this.style.visibility='hidden';">Bio</a>
                </li>
            </ul>
        </li>
    </ul>
</div>