Bootstrap Close Responsive Menu On Click

by NunoMira

HTML

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle styleMenu" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="glyphicon glyphicon-chevron-down"></span>
            </button>
            <span class="navbar-brand activeMenu">Teste</span>
        </div>
        
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li id="1" class="act navMenu">
                    <a href="#inicio" class="hidden-xs">Inicio</a>
                    <a href="#inicio" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Home</a>
                </li>
                <li id="2" class="navMenu">
                    <a href="#products" class="hidden-xs">Products</a>
                    <a href="#products" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Products</a>
                </li>
                <li id="3" class="navMenu">
                    <a href="#overview" class="hidden-xs">Overview</a>
                    <a href="#overview" class="visible-xs" data-toggle="collapse" data-target=".navbar-collapse">Overview</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="divMenuBody">
    <div id="menu1" class="menuBody">
      <h3>Home</h3>
      <p>Some content.</p>
    </div>
    <div id="menu2" class="menuBody">
      <h3>Products</h3>
      <p>Some content in menu 2.</p>
    </div>
    <div id="menu3" class="menuBody">
      <h3>Overview</h3>
      <p>Some content in menu 3.</p>
    </div>
</div>

CSS

.styleMenu
{
    padding-bottom: 5px;
    padding-top: 7px;
    margin-bottom: 6px;
    margin-top: 9px;
}

.glyphicon-chevron-down, .glyphicon-chevron-down:active
{
    color: white;
}

.divMenuBody
{
  background-color: red;
}

@media (min-width: 769px)
{
  .activeMenu
  { 
      display: none;
  }
}

@media (max-width: 768px)
{
  .activeMenu
  { 
      display: initial;
  }
}

.act
{
  background-color: black;
  color: white!important;
}

JavaScript

$(document).ready(function()
{
	showActiveMenu();
    
   $(".navMenu").on("click", function()
   {
      $(".navMenu").removeClass("act");
      $(this).addClass("act");
      showActiveMenu();
   });

});

var showActiveMenu = function ()
{
    $(".activeMenu").text($(".act > a:first-child").text());
    var menu = $(".act").attr("id");
    $(".menuBody").hide();
    $("#menu"+menu).show();
}