如何从外部链接更改标记的CSS

Question

我在一个名为的标签中有一个菜单sf-menu.

我需要将可见性更改none为单击链接时的可见性,并在再次单击时切换回来.

我可以只使用CSS实现这一点还是需要JavaScript？

希望有人可以帮我一个例子.

.sf-menu {visibility: visible}
<a class="closed" href="#sidewidgetarea"> Switch</a>

Answer 1

1. 您可以使用input type ='checkbox':

http://jsfiddle.net/gSPqX/1/

<input type="checkbox" style="display: none" id="cb">
<label for="cb">Click Here</label>
<div>
    Hello. This is some stuff.
</div>

2. 使用更好的解决方案 :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>

Answer 2

如果您使用的是jquery,则可以使用jquery.toggle()

例:

$(".closed").click(function(event) {
    event.stopPropagation()
    $(".sf-menu").toggle();
});

资料来源:https://api.jquery.com/toggle/

Answer 3

你只能使用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>