convert Jquery code to javascript – click not working

This is the code where I need to convert Jquery code to javascript code but converted javascript code not working. please check code –

HTML –

<nav class='animated bounceInDown'>
<ul>
    
    <li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a>
        <ul>
            <li><a href='#settings'>Account</a></li>
            <li><a href='#settings'>Profile</a></li>
            <li><a href='#settings'>Secruity &amp; Privacy</a></li>
            <li><a href='#settings'>Password</a></li>
            <li><a href='#settings'>Notification</a></li>
        </ul>
    </li>
    
</ul>

CSS –

 body {
    background-color: #fff;
    font-size: 14px;
}
nav {
    position: relative;
    margin: 50px;
    width: 360px;
}
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
nav ul li {
  /* Sub Menu */
}
nav ul li a {
    display: block;
    background: #ebebeb;
    padding: 10px 15px;
    color: #333;
    text-decoration: none;
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}
nav ul li a:hover {
    background: #f8f8f8;
    color: #515151;
}
nav ul li a .fa {
    width: 16px;
    text-align: center;
    margin-right: 5px;
    float:right;
}
nav ul ul {
    background-color:#ebebeb;
}
nav ul li ul li a {
    background: #f8f8f8;
    border-left: 4px solid transparent;
    padding: 10px 20px;
}
nav ul li ul li a:hover {
    background: #ebebeb;
    border-left: 4px solid #3498db;
}

jQUERY code –

   $('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
  $(this).parent(".sub-menu").children("ul").slideToggle("100");
  $(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});

CONVERTED javascript code–

document.querySelectorAll(".sub-menu ul").style.display = "none";
document.querySelectorAll(".sub-menu a").click(function () {
  this.parent(".sub-menu").children("ul").slideToggle("100");
  this.find(".right").toggleClass("fa-caret-up fa-caret-down");
});

The problem is javascript code is not working dropdown not hide and also click is not working..
please check it onces.