javascript - Dropdown Menu not working on Index.html after adding java script -

i creating personal website can not drop down work on desktop when on mobile devise hide nav , click(using js) show nav. not working on index.html

<div class="content">     <div class="header">             <div class="logo"><a href="assets/img/logo.png" alt="gm">gm</a>             </div>         <span class="menu-trigger">menu</span>         <nav class="nav clearfix">             <ul class="clearfix">                 <li><a class="active" href="index.html">home</a>                 </li>                 <li><a href="about.html">about</a>                 </li>                 <li><a href="#">portfolio <i class="fa fa-angle-down fa-1"></i></a>                     <ul class="sub-nav">                         <li><a href="music.html">music</a>                         </li>                         <li><a href="code.html">code</a>                         </li>                     </ul>                 </li>                 <li><a href="contact.html">contact</a>                 </li>             </ul>         </nav>         <!-- end of nav -->     </div>     </div> 

css:

/**header**/ .nav {     height: 61px;     background: #381120; }  .logo a{     float: left;     text-decoration: none;     color: #7e7e7e;     font-size: 43px;     padding-top: 11px;     padding-left: 30px; }  .nav ul {     margin: 0;     padding: 0;     float: right; }  .nav ul li {     list-style: none;     float: left;     display: block;     padding: 19px; }  .nav ul li {     color: #7e7e7e;     text-decoration: none;     font-size: 25px; }  .nav ul ul.sub-nav {     display: none;     background: #381120;     width: auto;     position: absolute; }  .nav ul li:hover > ul {     display: block; }  .nav ul ul li {     float: none;     padding-left: 24px; }  .nav ul li a.active {     color: #08a1c7; }  .nav ul li a:hover {     color: #efefef; } 

and:

.menu-trigger{     padding-top: 16px;     padding-right: 30px;     font-size: 25px;     text-align: center;     display: none;     float: right;     color: #7e7e7e }  .menu-trigger p{     color: #7e7e7e }      /**480px**/   @media screen , (max-width : 480px) {      .menu-trigger{         display: block;     }      .nav, .mobile-nav{         display: none;     }      .nav-expanded{         display: block;     }      .nav ul li{         float: none;         border-bottom: 1px solid #7e7e7e;     }      .nav ul li:last-child{         border-bottom: none;     } } 

here js sorry forgot put on here:

jquery(document).ready(function() {      jquery(".menu-trigger").click(function() {          jquery(".nav").slidetoggle(400, function() {             jquery(this).toggleclass("nav-expanded").css('display', '');         });      });  }); 

you should able animate of css. don't need jquery this, other click action maybe.

also, , may not case, in past have had write click handlers bypass odd bugs. slidetoggle in jquery can cause glitchy effects , not great way animated menu's. try avoid slidetoggle().

$("[your-selector]").on("click",function(){      /// something... });