我正在建立一个带有搜索栏的网站，但是搜索内容太多，我需要一种方法让人们将其切换为隐藏<div class="search"><ul><a href="bashEmulator.html">Bash Shell Emulator</a></ul><ul><a href="bashShellUseHow.html">How to use bash shell </a></ul>更重要的是。但是如何切换它被隐藏并用 JS 和显示<span>？非常感谢，环形游戏
3 回答
慕仙森
TA贡献1827条经验 获得超7个赞
您可以使用切换来添加和删除一个类，并且使用该类您可以隐藏搜索中的元素，这是一个示例：
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>
杨魅力
TA贡献1811条经验 获得超6个赞
这是没有使用大库的 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 events
document.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>
回首忆惘然
TA贡献1847条经验 获得超11个赞
我强烈建议您使用 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/150
提交
取消