问使用jquery单击时从Div中更改CSS类

EN

<div class="header"> 

    <a class="nav-toggle" href="#"><span></span></a>

    <nav class="navigation_menu id="nav">

            <ul class="navigation_ul">

                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                    <li class="exclude_under_line"><a href="#">Portfolio<span class="drop_arrow">&#9660;</span></a>

                        <ul>

                            <li><a href="#">Trimester 1</a></li>
                            <li><a href="#">Trimester 2</a></li>
                            <li><a href="#">Trimester 3</a></li>

                        </ul>

                    </li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Forum</a></li>

            </ul>

    </nav>

</div>

/** General Style **/

body {
    background:f5f5f5;
    margin: 0px;
    padding: 0px;
    font-family: 'roboto', sans-serif;
    font-weight: 300;
}

/** Text Style **/

a {
    text-decoration: none;
    color: inherit;
}

/** Header Style **/

.header {
    background: #607d8b;
    margin: 0px;
    padding: 0px;
    padding-bottom: 100px;
    color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

/** Navigation Menu **/

    /** Basic Style **/

    .navigation_menu > a { 
        display: none; /* Removes Show Navigation and Hide Navigation */
     }

     .navigation_menu ul{
        margin: 0px; /* Removes the auto create margin around the ul element */
        padding: 0px;
    }

    .navigation_menu li { 
        position: relative; /* Makes Drop Down Menu Work and being showed */
        list-style-type: none; /* Removes dots before Li elements  */
        font-size:18px; /* Makes font size 18 */
    }

    .navigation_menu > ul > li {
        height: 30px; /* Determines The width height between drop down and menu */
        float: left; /* Makes them float besides each other */
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 6px;
        padding-bottom: 2px;
    }

    .navigation_menu > ul > li > ul {
        padding: 0px; /* Removes the automatic created padding around the drop down ul */
        width: 140%; /* Makes the text in drop down menu (whos bigger then parent) not go to a second line */
        margin-top: -4px; /* Pushes the drop down are go down 8 pixels */
        position: absolute; /*Makes the child ul not affect the parent li */
    }

    .navigation_menu li ul {
        display: none;  /* Hides Drop Down */
        margin-left: -10px;
    }

    .navigation_menu li:hover ul {
         display: block; /* Makes Drop Down Menu Work again */
         background: white;
         box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    }

    /** Drop Arrow Style **/

    .drop_arrow {
        font-size:12px; /* Edits the size of the drop arrow */
        margin-left:4px; /* Moves it a little bit away from the text next to it */
        line-height:0%; /* Makes the icon don't affect the word next to it */
    }

    /* Hamburger  Style */

    .nav-toggle {
        display:none;
    }

    .nav-toggle { cursor: pointer; padding: 10px 35px 16px 0px; }

    .nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
      cursor: pointer;
      border-radius: 1px;
      height: 3px;
      width: 20px;
      background: white;
      position: absolute;
      display: block;
      content: '';
    }

    .nav-toggle span:before {
      top: -7px; 
    }

    .nav-toggle span:after {
      bottom: -7px;
    }

    .nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
      transition: all 500ms ease-in-out;
    }

    .nav-toggle.active span {
      background-color: transparent;
    }

    .nav-toggle.active span:before, .nav-toggle.active span:after {
      top: 0;
    }

    .nav-toggle.active span:before {
      transform: rotate(45deg);
    }

    .nav-toggle.active span:after {
      transform: rotate(-45deg);
    }

    @media only screen and ( max-width: 400px )  {

        .nav-toggle {
            display:block;
        }

        .navigation_menu {
            display: none;
        }

        .navigation_menu_new {
             display: block;
        }

    }

document.querySelector( ".nav-toggle" )
  .addEventListener( "click", function() {
    this.classList.toggle( "active" );
  });