当我的导航栏被折叠时，如何使按钮工作？

<nav class="navbar">
  <button id="toggleButton" class="toggle-button">菜单</button>
  <ul class="nav-links">
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .toggle-button {
    display: block;
  }
}

.navbar {
  /* 导航栏样式 */
}

.toggle-button {
  /* 按钮样式 */
  display: none;
}

$(document).ready(function() {
  $('#toggleButton').click(function() {
    $('.nav-links').slideToggle();
  });
});