我在名为sf-menu 的标签中有一个菜单。
我需要在单击链接时将可见性更改为none，并在再次单击时切换回来。
我可以仅使用 CSS 实现这一点还是需要 JavaScript？
希望有人能帮我举个例子。
.sf-menu {visibility: visible}
<a class="closed" href="#sidewidgetarea"> Switch</a>
【问题讨论】：
标签： javascript css toggle visibility
不幸的是，CSS 还没有这个功能。
JQuery 可以为您完成，只需两行代码。
$('.button').click(function(){
$('.sf-menu').toggle();
});
【讨论】：
<input type="checkbox" style="display: none" id="cb">
<label for="cb">Click Here</label>
<div>
Hello. This is some stuff.
</div>
:target 的更好解决方案
#menu .menu{
display:none;
}
#menu:target .menu{
display: block;
}
#menu:target .menu__open{
display: none;
}
#menu .menu__close{
display: none;
}
#menu:target .menu__close{
display: block;
}<div id="menu">
<a href="#menu" class="menu__open">Open menu</a>
<a href="#" class="menu__close">Close menu</a>
<div class="menu">
Hello. This is some stuff.
</div>
</div>【讨论】：
#checkbox1 {
display:none;
}
#checkbox1:checked ~ .sf-menu {
visibility: visible;
}
.sf-menu {
visibility:hidden;
}
.pseudo-link {
cursor: pointer;
}<div>
<input type="checkbox" id="checkbox1">
<label for="checkbox1"" class="pseudo-link>The link</label>
<ul class="sf-menu">
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
</ul>
</div>不需要javascript。该标签将被视为通过 css 链接。
【讨论】：
我喜欢响应中方便的“复选框”解决方案，纯 CSS。但是，如果您需要包含链接，您可以尝试在链接 HTML 代码中使用 onclick 属性。
#sf-menu {
visibility: hidden;
opacity: 0;
transition: all .3s;
}<div id="#sidewidgetarea">
<a class="closed" href="#sidewidgetarea"
onclick="with(document.getElementById('sf-menu').style){
visibility=(visibility==='visible'&&!(opacity=0)&&'hidden')
||((opacity=1)&&'visible')}"
>Switch</a>
<ul id="sf-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>【讨论】：
如果您能够编辑 DOM，则有一个 PureCSS 解决方案（见下文）， 但我认为最好的解决方案是使用 Javascript， jQuery 为您提供跨浏览器解决方案！
希望有帮助！！
var HIDDEN_CLASS = 'sf-menu-hidden';
/** jQuery **/
jQuery(document).ready(function($) {
$('#jQueryTest .closed').click(function closeWithJQuery(event) {
event.preventDefault();
$('#jQueryTest .sf-menu').toggleClass(HIDDEN_CLASS);
});
});
/** VanillaJS **/
document.addEventListener("DOMContentLoaded", function(event) {
document
.querySelector('#VanillaJSTest .closed')
.addEventListener('click', function() {
var el = document.querySelector('#VanillaJSTest .sf-menu');
var task = el.classList.contains(HIDDEN_CLASS) ? 'remove' : 'add';
el.classList[task](HIDDEN_CLASS);
});
});* {
-webkit-user-select: none;
user-select: none;
}
.sf-menu-hidden {
visibility: hidden;
}
a, label {
cursor: pointer;
}
article + article {
margin-top: 10px;
border-top: 1px solid green;
}
#PureCSSTest [type="checkbox"] {
display: none;
}
#PureCSSTest [type="checkbox"]:checked + .sf-menu {
visibility: hidden;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article id="jQueryTest">
<h1>Test jQuery</h1>
<a class="closed">TOGGLE MENù</a>
<div class="sf-menu">
<ul>
<li> Hey I Am On THE SCREEN</li>
</ul>
</div>
</article>
<article id="VanillaJSTest">
<h1>VanillaJS</h1>
<a class="closed">TOGGLE MENù</a>
<div class="sf-menu">
<ul>
<li> Hey I Am On THE SCREEN</li>
</ul>
</div>
</article>
<article id="PureCSSTest">
<h1>PURE CSS</h1>
<a class="closed"><label for="toggleClosed">TOGGLE MENù</label></a>
<input type="checkbox" id="toggleClosed">
<div class="sf-menu">
<ul>
<li> Hey I Am On THE SCREEN</li>
</ul>
</div>
</article>【讨论】：
在 HTML 中：
<h1 class="sf-menu"> TestText </h1>
JavaScript：
var sfmenu = document.getElementsByClassName("sf-menu");
sfmenu[0].onclick = function () {
if (this.style.display == 'none' ) {
this.style.display = '';
} else {
this.style.display = 'none';
}
};
【讨论】：
这是 jQuery 中的一个超级简单的解决方案，使用您提到的标签。但首先删除你的 CSS 行！
请注意，此示例似乎无法在 stackoverflow.com 上执行，但在 jsfiddle.net 上运行良好。
$('.closed').click(function(){
$('.sf-menu').toggle();
});<a class="closed" href="#sidewidgetarea">Switch</a>
<div class="sf-menu">The menu</div>【讨论】：
也许这会有所帮助。使用它会在单击时隐藏您的菜单，然后根据您的要求删除或添加类。
#sf-menu:active{
display:none;
}
【讨论】：
您可以使用纯Javascript 实现此目的。
对锚标记使用 onclick 事件。
function OnsidewidgetareaClick()
{
var elementObj = document.getElementsByClassName("sf-menu")[0];
if (elementObj.style.display == 'block' ||elementObj.style.display=='')
{
elementObj.style.display = 'none';
}
else
{
elementObj.style.display = 'block';
}
}.sf-menu {visibility: visible}<a class="closed" href="#sidewidgetarea" onclick="OnsidewidgetareaClick();"> Switch</a>
<div class="sf-menu">
This is the .sf-menu element.
</div>【讨论】：
您可以仅使用 CSS 来实现。诀窍是留下可以单击的轨迹，并用作打开或关闭显示的开关/按钮。您可以通过将需要切换的内容包装到某个 div 或任何其他适合您的元素中来实现这一点。
这里有一个小例子。
label {
cursor: pointer;
}
#menu-toggle {
display: none; /* hide the checkbox */
}
#menu {
display: none;
}
#menu-toggle:checked + #menu {
display: block;
}<label for="menu-toggle">Click me to toggle menu</label>
<input type="checkbox" id="menu-toggle"/>
<ul id="menu">
<li><a href="#">First link</a></li>
<li><a href="#">Second link</a></li>
<li><a href="#">Third link</a></li>
</ul>【讨论】：
CSS：
.myVisibleLink{
display:block;
}
.myHiddenLink{
display:none;
}
jquery：
var myFlag = false;
$(function() { //run when the DOM is ready
$("#IDOfLink").click(function() { //use a class, since your ID gets mangled
if(myFlag == false){
myFlag = true;
$(this).addClass("myHiddenLink"); //add the class to the clicked element
}else{
myFlag = false;
$(this).addClass("myVisibleLink"); //add the class to the clicked element
}
});
});
【讨论】：
如果你使用jquery，你可以使用jquery.toggle()
例子：
$(".closed").click(function(event) {
event.stopPropagation()
$(".sf-menu").toggle();
});
【讨论】：