JS下拉导航菜单无法按预期工作

Question

单击时此下拉菜单不显示任何结果。

JS代码：

$('#king-mainmenu li a').on( 'click', function(e){
       if( !$(this.parentNode).find('ul').get(0) || $('body').width() > 1000 ){
            return true;
        }
       if( $(this.parentNode).hasClass('open') ){
            $(this.parentNode).removeClass('open');
            return true;
        }
       else $(this.parentNode).addClass('open');
       e.preventDefault();

       return false;
    });

Answer 1

这是一个非常简单的演示：

 $("li#dropdown>a").click(function (){ $(".dropdownMenu").toggleClass("active"); }); 

 .nav li.mainMenu{ margin:0; padding:0; list-style-type:none; float:left; } .nav li a{ color:white; background-color:#48a8f8; text-decoration:none; padding:5px 10px; border:1px solid black; } li#dropdown a{ position:relative; } ul.dropdownMenu{ visibility:hidden; margin:6px 0 0 0; padding:0; position:absolute; } ul.dropdownMenu.active{ visibility:visible; } ul.dropdownMenu li{ margin:0; padding:0; list-style-type:none; line-height:30px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="nav"> <li class="mainMenu" id="dropdown"> <a href="#">Home</a> <ul class="dropdownMenu"> <li><a href="#">Dropdown-1</a></li> <li><a href="#">Dropdown-2</a></li> <li><a href="#">Dropdown-3</a></li> </ul> </li> <li class="mainMenu"><a href="">About</a></li> <li class="mainMenu"><a href="">Projects</a></li> <li class="mainMenu"><a href="">Contact</a></li> </ul>