在這個選單中，我試圖在點擊時將“ ”符號更改為“-”，但我不知道如何繼續。這將是一個按鈕，稍后我將更改為自定義圖示...
html
<header id="header">
<div class="header-container">
<p id="logo">Logo</p>
<nav id="nav">
<div id="btn-mobile"> </div>
<ul id="menu">
<li><a href="#">Sobre</a></li>
<li><a href="#">Trabalhos</a></li>
<li><a href="#">Carreiras</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>
js
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu() {
const nav = document.getElementById('nav');
nav.classList.toggle('active');
}
btnMobile.addEventListener('click', toggleMenu);
謝謝！
uj5u.com熱心網友回復：
你所要做的就是使用innerText你的btn-mobile
const btnMobile = document.getElementById('btn-mobile');
function toggleMenu() {
const nav = document.getElementById('nav');
const btnMobile = document.getElementById('btn-mobile');
nav.classList.toggle('active');
btnMobile.innerText = '-';
}
btnMobile.addEventListener('click', toggleMenu);
或者textContent，兩者幾乎都做同樣的作業，只是有一些細微的差別。參考：
https ://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
MDN 是學習這些基本 JS DOM 方法的好地方。
uj5u.com熱心網友回復：
您可以使用i和使用 css 類來設定 或-
const btnMobile = document.getElementById('icon');
function toggleMenu() {
if (btnMobile.classList.contains('icon-plus')) {
btnMobile.classList.remove('icon-plus');
btnMobile.classList.add('icon-minus')
} else if (btnMobile.classList.contains('icon-minus')) {
btnMobile.classList.remove('icon-minus');
btnMobile.classList.add('icon-plus')
}
}
btnMobile.addEventListener('click', toggleMenu);.icon-plus:after {
content: ' ';
cursor: pointer;
}
.icon-minus:after {
content: '-';
cursor: pointer;
}<header id="header">
<div class="header-container">
<p id="logo">Logo</p>
<nav id="nav">
<div id="btn-mobile">
<i id='icon' class="icon icon-plus"></i>
</div>
<ul id="menu">
<li><a href="#">Sobre</a></li>
<li><a href="#">Trabalhos</a></li>
<li><a href="#">Carreiras</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
</div>
</header>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/498422.html
標籤：javascript html