如何通过外部链接改变标签的CSS

Question

我有一个标签为sf-menu的菜单。

当链接被点击时，我需要能够将其可见性更改为none，再次点击时切换回来。

我该只用CSS实现这一点还是需要JavaScript的帮助？

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

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

- Erik

---

你可以使用CSS做到这一点。:target伪选择器是仅使用CSS实现它的唯一方法。您可以从这里查看详细信息。https://css-tricks.com/on-target/ - ebilgin

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>

- sglazkov

---

我没有使用复选框。 - Erik

使用第二种解决方案，使用 :target。 - sglazkov

第一种解决方案不是这个问题的答案，但第二种是。这个答案应该被接受。 - ebilgin

@Eirk 我同意这是我能想到的唯一纯CSS方法。但是在使用:target时需要注意一些事情。 以下是我使用:target的经验法则：当需要“状态”时。 当跳转行为可以接受时。 当影响浏览器历史记录可以接受时。摘自https://css-tricks.com/on-target/ - partypete25

我想，在单页应用程序（使用哈希符号URL）的情况下，这种方法会有问题。相反，使用JS / JQuery甚至基于复选框的方法要好得多。 - Vivek Athalye

Answer 2

如果您正在使用jQuery，可以使用jquery.toggle()。

例如：

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

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

- Hieu Le

---

这个答案没有提供完整的问题解决方案。那个脚本的哈希部分在哪里？ - ebilgin

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>

- Haseeb Zulfiqar

Answer 4

如果您能够编辑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>

- Hitmands

Answer 5

这里有一个使用jQuery的超级简单的解决方案，使用你提到的标签。但是首先要删除你的CSS-row！

请注意，这个例子似乎不能在stackoverflow.com上执行，但在jsfiddle.net上可以正常工作。

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

<a class="closed" href="#sidewidgetarea">Switch</a>
<div class="sf-menu">The menu</div>

- Fabian Mossberg

Answer 6

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

- Osama AbuSitta

Answer 7

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

- Eugene Tiurin

Answer 8

#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，标签将被视为链接。

- Phakamani Mkulise

Answer 9

你可以用纯粹的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>

- Kishore Sahasranaman

Answer 10

也许这可以帮助你。使用它将在单击时隐藏菜单，然后根据您的要求添加或删除类。

#sf-menu:active{
    display:none;
}

- Cheezy Code