Jquery slideToggle无法在侧边栏上工作？

Question

当我点击li时，我似乎无法弄清楚为什么我的Jquery代码没有执行。这可能非常简单，我无法发现...

HTML：

$(function() {
  ("#btn-more-nav").click(function() {
    $("#dropdown-nav").slideToggle();
  })
});

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #999;
  font-size: 1.2em;
}

.dropdown-nav {
  padding-left: 10px;
  background-color: #f6f6f6;
}

.dropdown-nav li {
  background-color: #f6f6f6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="active"><a href="index.php">Home</a></li>
  <li><a href="profile.php">Profile</a></li>
  <li><a href="notifications.php">Notifications</a></li>
  <li><a href="messages.php">Messages</a></li>
  <li id="btn-more-nav"><a href="">More<i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
  <ul class="dropdown-nav" id="dropdown-nav">
    <li><a href="logout.php">Logout<i class="fa fa-sign-out" aria-hidden="true"></i></a></li>
    <li><a href="settings.php">Settings<i class="fa fa-cog" aria-hidden="true"></i></a></li>
  </ul>
</ul>