找到你要的答案

Q:How to change css of tag from an outside link

Q:如何改变CSS标签从一个外部链接

I have a menu in a tag called sf-menu.

I need the visibility to change to none when the link is clicked and toggled back when clicked again.

Can I achieve this with CSS only or do I need JavaScript?

Hoping someone can help me with an example.

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

我有一个菜单叫做SF菜单标签。

我需要改变的能见度没有当链接被点击,切换回来时,再次单击。

我能实现这个CSS或JavaScript只需要我做吗?

希望有人能帮我举个例子。

.sf-menu {visibility: visible}
<a class="closed" href="#sidewidgetarea"> Switch</a>
answer1: 回答1:
  1. You can use input type='checkbox' for it :

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>
  1. One more better solution using :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>
  1. You can use input type='checkbox' for it :

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>
  1. One more better solution using :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>
answer2: 回答2:

If you are using jquery, you can use jquery.toggle()

Example:

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

Source: https://api.jquery.com/toggle/

如果您使用的是jQuery,你可以使用jQuery。toggle()

例子:

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

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

answer3: 回答3:

You can do it using only CSS. The trick is to leave a trail that could be clicked and work as a switch/button for turning display on or off. You can accomplish that by wrapping your content needed to be toggled into some div or any other element suitable to you.

Here is a little example for that.

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。诀窍是留下一个可以点击的路径,作为开关/按钮来打开或关闭显示器。你可以用你的内容需要切换到一些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>
answer4: 回答4:

Here is a super simple solution in jQuery, using the tags you have mentioned. But first remove your CSS-row!

Please not that this example doesnät seem to execute on stackoverflow.com but works fine on jsfiddle.net.

$('.closed').click(function(){
    $('.sf-menu').toggle();
});
<a class="closed" href="#sidewidgetarea">Switch</a>
<div class="sf-menu">The menu</div>

这是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>
answer5: 回答5:

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

在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';
    }
};
answer6: 回答6:

If you're able to edit the DOM, there is a PureCSS solution (see below), but I think that the best solution is using Javascript, jQuery offers you a crossbrowser solution!

Hope Helps!!

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>

If you're able to edit the DOM, there is a PureCSS solution (see below), but I think that the best solution is using Javascript, jQuery offers you a crossbrowser solution!

希望有帮助!!

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>
answer7: 回答7:

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

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  css  toggle  visibility