單擊圖示時顯示和隱藏移動選單

我已經解決了關于這個主題的各種問題，我嘗試過但沒有成功。我是初學者。

我試圖替換位于具有id“show”的“headbar_view”類。默認情況下它是隱藏的。然后使用 JavaScript 代碼通過參考 querySelector 來檢索相關元素的“id”，我想用“headbar_view show”替換上一個類“headbar_view”，它必須根據 CSS 代碼顯示選單

HTML、CSS 和 JS 代碼

// JS 

const menu = document.querySelector('#menu');
const displayMobileMenu = document.querySelector('#show');

menu.onClick = function() {
    displayMobileMenu.classList.toggle('headbar_view show');
}

/* CSS */ 
   
.headbar_view {
     display: none;
     background: #fff;
}
.headbar_view.show {
     display: block !important;
}

<!-- Blade html -->    

<div class="headbar_head_item hidden-lg" id="menu">
                            <svg class="headbar_head_icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                viewBox="0 0 384.97 384.97" style="enable-background:new 0 0 384.97 384.97;" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M12.03,84.212h360.909c6.641,0,12.03-5.39,12.03-12.03c0-6.641-5.39-12.03-12.03-12.03H12.03
                                            C5.39,60.152,0,65.541,0,72.182C0,78.823,5.39,84.212,12.03,84.212z"/>
                                        <path d="M372.939,180.455H12.03c-6.641,0-12.03,5.39-12.03,12.03s5.39,12.03,12.03,12.03h360.909c6.641,0,12.03-5.39,12.03-12.03
                                            S379.58,180.455,372.939,180.455z"/>
                                        <path d="M372.939,300.758H12.03c-6.641,0-12.03,5.39-12.03,12.03c0,6.641,5.39,12.03,12.03,12.03h360.909
                                            c6.641,0,12.03-5.39,12.03-12.03C384.97,306.147,379.58,300.758,372.939,300.758z"/>
                                    </g>
                                <g>
                            </svg>
                        </div>
                        
<div class="headbar_view " id="show">
                        <ul class="headbar_mobile_item_container">
                            <li class="headbar_mobile_item">
                                Destinations
                                <span class="headbar_mobile_item_next">
                                    <svg version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                        viewBox="0 0 330.002 330.002" style="enable-background:new 0 0 330.002 330.002;" xml:space="preserve">
                                        <path id="XMLID_226_" d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21
                                            l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001
                                            c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/>
                                    </svg>
                                </span>
                            </li>
                            <li class="headbar_mobile_item">
                                Suggestions
                                <span class="headbar_mobile_item_next">
                                    <svg version="1.1" id="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                        viewBox="0 0 330.002 330.002" style="enable-background:new 0 0 330.002 330.002;" xml:space="preserve">
                                        <path id="XMLID_226_" d="M233.252,155.997L120.752,6.001c-4.972-6.628-14.372-7.97-21-3c-6.628,4.971-7.971,14.373-3,21
                                            l105.75,140.997L96.752,306.001c-4.971,6.627-3.627,16.03,3,21c2.698,2.024,5.856,3.001,8.988,3.001
                                            c4.561,0,9.065-2.072,12.012-6.001l112.5-150.004C237.252,168.664,237.252,161.33,233.252,155.997z"/>
                                    </svg>
                                </span>
                            </li>
                            <li class="headbar_mobile_item">
                                Services
                            </li>
                            <li class="headbar_mobile_item">
                                Concept
                            </li>
                            <li class="headbar_mobile_item">
                                Infos
                            </li>
                        </ul>
                    </div>

uj5u.com熱心網友回復：

您必須選擇始終存在的東西。

const displayMobileMenu = document.querySelector('.headbar_view');

Toggle用作開關功能。如果不存在，這將添加類“show”，如果已經存在，則將其洗掉。

menu.addEventListener('click', function() {
   displayMobileMenu.classList.toggle('show');
})

請記住，作為一項規則，類在 javascript 中以點 (.) 開頭。此外，ID 不能在同一個 HTML 中重復。

標籤：javascript html css

上一篇：根據特定關鍵字將文本行移動到頂部/底部

下一篇：我怎樣才能讓它停止計數？