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>