如何从外部链接更改标签的css

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

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

#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。诀窍是留下一个可以点击的痕迹，作为开关或按钮来打开或关闭显示。您可以通过将需要切换的内容包装到某个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解决方案，使用您提到的标记。但首先要删除css行!

请不要这个例子doesnät似乎在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解决方案(见下文)，但我认为最好的解决方案是使用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>

CSS:

.myVisibleLink{
     display:block;
}
.myHiddenLink{
     display:none;
}

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;
}

我喜欢响应中方便的"复选框"解决方案，纯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>

不需要javascript。该标签将被视为通过css的链接。

不幸的是，CSS还没有这个功能。

JQuery可以为您完成，只需两行代码。

$('.button').click(function(){
   $('.sf-menu').toggle();
});