我是 JavaScript 新手，遇到了一個問題：我在我的 HTML 頁面中構建了一個下拉選單/導航欄。當您單擊一個按鈕時，它會按原樣打開，但我正在努力關閉它。當您再次單擊該按鈕時，它應該會關閉，但由于某種原因我不能這樣做。
我的方法是將一個類btn和 id分配disabled-btn給一個 div。單擊并打開下拉串列后，按鈕應該有一個新的 id enabled-btn，應該選擇它，以便我可以反轉該程序。
我通過除錯了解到，如果頁面上還沒有元素，則無法查詢選擇元素，但無論如何我都沒有設法繞過它。
這是我嘗試過的代碼變體之一。
const disabledButton = document.querySelector('#disabled-btn')
const navbar = document.querySelector('.my_navbar')
const enabledButton = document.querySelector('#enabled-btn')
const button = document.querySelector('.btn')
disabledButton.onclick = () => {
navbar.style.transform = 'translate(0%, 0%)'
disabledButton.style.rotate = '90deg'
disabledButton.setAttribute('id', 'enabled-btn')
if (button === enabledButton) {
enabledButton.onclick = () => {
navbar.style.transform = 'translate (-100%, 0%)'
enabledButton.style.rotate = '0deg'
enabledButton.setAttribute('id', 'disabled-btn')
}
}
}<div class="open-btn" id="disabled-btn">
<svg ...some svg here...></svg>
</div>
<nav class="my_navbar">
<div class="my_navbar-nav"><a href="#">GALLERY</a></div>
<div class="my_navbar-nav"><a href="#">PRESETS</a></div>
<div class="my_navbar-nav"><a href="#">ABOUT</a></div>
<div class="my_navbar-nav"><a href="#">BOOKING</a></div>
</nav>uj5u.com熱心網友回復：
不要更改身份證。它們是唯一識別符號，因此不會更改。相反，我建議使用屬性。只要確保它不作為屬性存在即可。如有疑問，請添加data-attributename。
您需要為每個專案設定事件偵聽器并處理其中的邏輯。這是一個示例，其中包含對正在發生的事情的一些評論。我不確定您要如何明智地進行樣式設定，但我建議您僅添加和洗掉類，并處理 CSS 內部的樣式。這將使其在概念上更加獨立且更易于理解。
讓我知道這是否有助于您想要實作的目標。
// Getting all the nav items in an a 'nodelist'
const navItems = document.querySelectorAll('.navbar .nav-item')
// Adding an event listener to each nav item
navItems.forEach( item => {
item.addEventListener('click', () => {
// check if item has 'active' attribute
if (item.hasAttribute('active')) {
// remove if it does
item.removeAttribute('active')
} else {
// otherwise add it
item.setAttribute('active', '')
}
})
}).navbar a {
text-decoration: none;
color: black;
}
.nav-item[active] a {
text-decoration: underline;
color: blue;
}<nav class="navbar">
<div class="nav-item" active>
<a href="#">GALLERY</a>
</div>
<div class="nav-item">
<a href="#">PRESETS</a></div>
<div class="nav-item">
<a href="#">ABOUT</a>
</div>
<div class="nav-item">
<a href="#">BOOKING</a>
</div>
</nav>uj5u.com熱心網友回復：
css：您不必為啟用和禁用單獨的按鈕。在這里，我給了一些 css.my_navbar并在 css 有活動課程時將其分開.my_navbar.active..
js：像往常一樣獲取 nav 和 btn ，querySelector我將eventListerner型別click放在disabledButton& 里面我 toggling是active在navbar. 希望它有所幫助
/*const disabledButton = document.querySelector('#disabled-btn')
const navbar = document.querySelector('.my_navbar')
const enabledButton = document.querySelector('#enabled-btn')
const button = document.querySelector('.btn')
disabledButton.onclick = () => {
navbar.style.transform = 'translate(0%, 0%)'
disabledButton.style.rotate = '90deg'
disabledButton.setAttribute('id', 'enabled-btn')
if (button === enabledButton) {
enabledButton.onclick = () => {
navbar.style.transform = 'translate (-100%, 0%)'
enabledButton.style.rotate = '0deg'
enabledButton.setAttribute('id', 'disabled-btn')
}
}
}*/
const disabledButton = document.querySelector('#disabled-btn');
const navbar = document.querySelector('.my_navbar');
disabledButton.addEventListener("click", () => {
navbar.classList.toggle("active")
}).my_navbar {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: 0px;
gap: 10px;
background-color: gray;
height: 0;
overflow: hidden;
transition: all 0.25s ease-in-out;
}
.my_navbar.active {
padding: 20px;
height: 190px;
}
.my_navbar-nav {
width: 90%;
padding: 10px 30px;
background-color: lightgray;
}
.my_navbar-nav>a {
color: white;
text-decoration: none;
}<div class="open-btn" id="disabled-btn">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-menu-2" width="40" height="40"
viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke- linecap="round"
stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
<line x1="4" y1="6" x2="20" y2="6" />
<line x1="4" y1="12" x2="20" y2="12" />
<line x1="4" y1="18" x2="20" y2="18" />
</svg>
</div>
<nav class="my_navbar">
<div class="my_navbar-nav"><a href="#">GALLERY</a></div>
<div class="my_navbar-nav"><a href="#">PRESETS</a></div>
<div class="my_navbar-nav"><a href="#">ABOUT</a></div>
<div class="my_navbar-nav"><a href="#">BOOKING</a></div>
</nav>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/506651.html
標籤：javascript html