JavaScript-未定義style.display

Question

試圖擺脫jQuery拐杖，並將波紋管功能重構為純JS。

 //slide toggle navigation 
 $('#nav-toggle').click(function () {
     $('.nav-list').slideToggle();
 });

   //toggle hamburger menu 
 $('#nav-toggle').click(function () {
    this.classList.toggle('active');
 });

我得到的最后一個是：

   const toggle = document.getElementById('nav-toggle');
   const navList = document.getElementsByClassName('nav-list');  

    toggle.addEventListener('click', function(e){
    this.classList.toggle('active'); //toggle hamburger menu 
    e.preventDefault();
    }, false);

當我嘗試將兩種功能都傳遞給同一個click事件時，我遇到了一個阻止程序：

//Add a click event listener
toggle.addEventListener('click', function(e){
    //show hide div
    if (navList.style.display == 'none') {
        navList.style.display === 'block';
    } else {
        navList.style.display === 'none';
    }    

    this.classList.toggle('active');
    e.preventDefault();
}, false);

我在CSS沒有顯示.nav-list 。

每個事件都需要單獨的事件偵聽器嗎？ 我嘗試過，但是錯誤仍然相同= TypeError: navList.style is undefined

另外，這個討厭的波紋管作為純JS的重構是什么？

 $('nav ul li a:not(:only-child)').click(function (e) {
        $(this).siblings('.nav-dropdown').toggle();
        // Close one dropdown when selecting another
        $('.nav-dropdown').not($(this).siblings()).hide();
        e.stopPropagation();
    });

Answer 1

您雖然沒有使用jQuery，但仍在考慮使用jQuery。 navList現在是一個NodeList對象，您需要迭代：

//Add a click event listener
toggle.addEventListener('click', function(e){
    //show hide div
    for( var i = 0; i < navList.length; ++i ){
        if (navList[i].style.display == 'none') {
            navList[i].style.display === 'block';
        } else {
            navList[i].style.display === 'none';
        }    
    }
    this.classList.toggle('active');
    e.preventDefault();
}, false);

編輯：這個怪獸應該做另一個功能的工作：

(function(){
    var navDropdown = document.getElementsByClassName('nav-dropdown');
    var nav = document.getElementsByTagName('nav');
    for( var i = 0; i < nav.length; ++i ){
        var ul = nav[i].getElementsByTagName('ul');

        for( var j = 0; j < ul.length; ++j ){
            var li = ul[j].getElementsByTagName('li');

            for( var m = 0; m < li.length; ++m ){
                var a = li[m].getElementsByTagName('a');

                if( a.length > 0 ){
                    for( var k = 0; k < a.length; ++k ){
                        a[k].addEventListener('click', (function(a){
                                return function(e){
                                    for( var n = 0; n < a.length; ++n ){
                                        a[n].classList.toggle('nav-dropdown');
                                    }   

                                    for( var o = 0; o < navDropdown.length; ++o ){
                                        var found = false;
                                        for( var n = 0; n < a.length; ++n ){
                                            if( navDropdown[o] === a[n] ){
                                                found = true;
                                                break;
                                            }
                                        }
                                        if( !found ){
                                            navDropdown[o].classList.add('hide');
                                        }
                                    }

                                    e.preventDefault();
                                };
                            })(a)
                        );
                    }
                }
            }
        }
    }
})();

它很可能是我寫過的最糟糕的事情之一，但是它應該可以工作……顯然，如果沒有實際的頁面，我無法檢查它是否可以運行，但是至少它可以運行。

Answer 2

您可以使用Array.from遍歷節點列表，將其視為數組。

Array.from(navList).forEach(function(navItem){
  navItem.style.display = navItem.style.display === 'none' ? 'block' : 'none';
})

Answer 3

語法中的等號應為：

if (navList.style.display === 'none') {
    navList.style.display = 'block';
} else {
    navList.style.display = 'none';
}

快速備忘單：

=： 分配

==： 等於 （也跨越javascript“類型邊框”，即0 ==“ 0”為true）

===： 嚴格等於 （0 ===“ 0”為假，0 === 0為真）