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);

当我尝试将两种功能传递给同一个点击事件时，我遇到了阻止程序：

//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);

我的.nav-list中显示为CSS {。}}。

每个活动是否需要单独的事件监听器？我试过了，但错误仍然相同= 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＆＃34;键入border＆＃34;，即0 ==＆＃34; 0＆＃34;为真）

===：严格等于（0 ===＆＃34; 0＆＃34;为假，0 === 0为真）

JavaScript - style.display未定义

3 个答案: