Question

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

我需要在点击链接时更改为none的可见性，并在再次点击时切换回来。

我是否可以仅使用CSS实现此目的，还是需要JavaScript？

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

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

Answer 1

如果您使用的是jquery，则可以使用jquery.toggle（）

示例：

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

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

Answer 2

您只能使用CSS来完成。诀窍是留下可以点击的路径，并作为开关/按钮用于打开或关闭显示。你可以通过将你需要的内容包装成一些div或任何其他适合你的元素来实现这一点。

这是一个小例子。

＆＃13;

label {
  cursor: pointer;
}
#menu-toggle {
  display: none; /* hide the checkbox */
}
#menu {
  display: none;
}
#menu-toggle:checked + #menu {
  display: block;
}

＆＃13;

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

＆＃13;

Answer 3

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

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>

Answer 5

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

Answer 6

您可以使用纯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>

Answer 7

也许这会有所帮助。使用此功能会在点击时隐藏您的菜单，然后根据您的要求删除或添加课程。

{{1}}

Answer 8

我喜欢方便的＆＃34;复选框＆＃34;响应中的解决方案，纯CSS。但是，如果您需要涉及链接，则可以尝试使用链接HTML代码中的onclick属性。

＆＃13;

#sf-menu {
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

＆＃13;

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

＆＃13;

Answer 9

#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链接。

Answer 10

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

JQuery可以用两行代码完成。

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

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

10 个答案: