TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以使用切換來添加和刪除一個(gè)類，并且使用該類您可以隱藏搜索中的元素，這是一個(gè)示例：
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貢獻(xiàn)1811條經(jīng)驗(yàn) 獲得超6個(gè)贊
這是沒有使用大庫(kù)的 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貢獻(xiàn)1847條經(jīng)驗(yàn) 獲得超11個(gè)贊
我強(qiáng)烈建議您使用 JQuery 庫(kù)。它超級(jí)簡(jiǎn)單，您只需將以下腳本添加到您的<head>標(biāo)簽中即可：
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
那么它會(huì)很簡(jiǎn)單：
$("#clickedElementThatWillHide").click(function(){
$("span").hide();
});
有關(guān)更多示例，請(qǐng)查看W3Schools
舉報(bào)