How to hide drop-down menu in Bootstrap 3.3.4 dynamically using jQuery in document-ready function?

Question

I've following Bootstrap HTML code :

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <ul class="nav navbar-nav">
        <li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
          <ul class="dropdown-menu">
            <li><a href="/prj/pages/project/projectList.html">List</a></li>
            <li><a href="/prj/pages/project/createNewProject.html">Add new project</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

Now I want to hide the drop-down menu using jQuery code ie I want to hide the drop-down menus List and Add new project .

I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.

Thanks.

Answer 1

$( document ).ready(function() {
    $("ul.dropdown-menu").children().hide();
});