如何从外部链接更改标签的CSS
我在一个名为sf-menu的标签中有一个sf-menu 。
当点击链接时，我需要将可见性更改为none ，再次单击时将其切换回。
我可以用CSS来实现吗？还是我需要JavaScript？
希望有人能帮我一个例子。
.sf-menu {visibility: visible} <a class="closed" href="#sidewidgetarea"> Switch</a>
- 你可以使用input type ='checkbox'：
<input type="checkbox" style="display: none" id="cb"> <label for="cb">Click Here</label> <div> Hello. This is some stuff. </div>
- 另一个更好的解决scheme使用
: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>
如果你使用jQuery，你可以使用jquery.toggle（）
例：
$(".closed").click(function(event) { event.stopPropagation() $(".sf-menu").toggle(); });
来源： https ： //api.jquery.com/toggle/
你可以使用唯一的CSS。 诀窍是留下一个可以点击的线索，并作为一个开关/button来打开或closures显示。 您可以通过将您需要切换到某个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>
这是一个超级简单的jQuery解决scheme，使用您提到的标签。 但首先删除您的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>
在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'; } };
如果你能够编辑DOM，有一个PureCSS解决scheme（见下文），但我认为最好的解决scheme是使用JavaScript，jQuery为您提供了一个交叉浏览器解决scheme！
希望帮助！
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>
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 } }); });
你可以用纯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>
也许这可以帮助。使用这将隐藏你的菜单上点击，然后根据您的要求删除或添加课后。
#sf-menu:active{ display:none; }
我喜欢这个方便的“checkbox”解决scheme，纯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>
#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>
不幸的是，CSS还没有这个function。
JQuery可以在两行代码中为你完成。
$('.button').click(function(){ $('.sf-menu').toggle(); });
