如何使用 <span> 和 JS 切换 <div> 标签隐藏和可见？

3回答

慕仙森

您可以使用切换来添加和删除一个类，并且使用该类您可以隐藏搜索中的元素，这是一个示例：const searchElement = document.getElementById("search");const toggleElement = document.getElementById("toggle-visibility");toggleElement.addEventListener("click", toggleSearchVisibility);function toggleSearchVisibility() {  searchElement.classList.toggle("hide-element")}.hide-element{  display: none;}<div id="search">  <ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul>  <ul><a href="bashShellUseHow.html">How to use bash shell </a></ul></div><span id="toggle-visibility">Click me!</span>

0 0

杨魅力

这是没有使用大库的 Vanilla Javascript<p>  <a class="toggle" href="#example">Toggle Div</a></p><div  id="example">  <ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul>  <ul><a href="bashShellUseHow.html">How to use bash shell </a></ul></div><script>var show = function (elem) {    elem.style.display = 'block';};var hide = function (elem) {    elem.style.display = 'none';};var toggle = function (elem) {    // If the element is visible, hide it    if (window.getComputedStyle(elem).display === 'block') {        hide(elem);        return;    }    // Otherwise, show it    show(elem);};// Listen for click eventsdocument.addEventListener('click', function (event) {    // Make sure clicked element is our toggle    if (!event.target.classList.contains('toggle')) return;    // Prevent default link behavior    event.preventDefault();    // Get the content    var content = document.querySelector(event.target.hash);    if (!content) return;    // Toggle the content    toggle(content);}, false);</script>

0 0

回首忆惘然

我强烈建议您使用 JQuery 库。它超级简单，您只需将以下脚本添加到您的<head>标签中即可：<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>那么它会很简单：$("#clickedElementThatWillHide").click(function(){    $("span").hide();  });有关更多示例，请查看W3Schools

0 0