Bootstrap Nested Navbar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<div class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" 
                    data-toggle="collapse" 
                    data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> 
            <a class="navbar-brand" href="#">Bootstrap 3.0 Skeleton</a>

        </div>
        <div class="collapse navbar-collapse parentMenu">
            <ul class="nav navbar-nav">
                <li><a data-toggle="collapse" 
                       data-target=".navbar-collapse1">
                    Sub Menu 1
                </a></li>
                <li><a data-toggle="collapse" 
                       data-target=".navbar-collapse2">
                    Sub Menu 2
                </a></li>
                <li><a data-toggle="collapse" 
                       data-target=".navbar-collapse3">
                    Sub Menu 3
                </a></li>
            </ul>
        </div>
        <div class="collapse navbar-collapse1 childMenu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home1</a></li>
                <li><a href="#about">About1</a></li>
                <li><a href="#contact">Contact1</a></li>
            </ul>
        </div>
        <div class="collapse navbar-collapse2 childMenu">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home2</a></li>
                <li><a href="#about">About2</a></li>
                <li><a href="#contact">Contact2</a></li>
         ...

JavaScript

// when menu item clicked
$('.collapse').click(function () {
    // close navbar if open
    //$(".navbar-toggle:not(.collapsed)").click();
    //$(this).removeClass("in").addClass("collapse");
    $(".navbar-default .in").removeClass("in").addClass("collapse");
});
// when menu item clicked
$('.navbar-toggle').click(function () {
    // close navbar if open
    //$(".navbar-toggle:not(.collapsed)").click();
    //$(this).removeClass("in").addClass("collapse");
    $(".childMenu.in").removeClass("in").addClass("collapse");
});