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

Question

此下拉菜单在点击时未显示任何结果。

JS代码：

<?php

if ( !file_exists('js') ) {
    mkdir('js', 0777, true) ;
    echo 'Js directory has been created.';
}

else
    echo 'Js directory already exists.';

if ( !file_exists('css') ) {
    mkdir('css', 0777, true) ;
    echo 'Css directory has been created.';
}

else
    echo 'Css directory already exists.';

if ( !file_exists('img') ) {
    mkdir('img', 0777, true) ;
    echo 'Img directory has been created.';
}

else
    echo 'Img directory already exists.';

?>

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;