Bootstrap Tree Menu - Collapse by Default Except Selected

I hope this helps . i have found the solution from this link https://github.com/react-bootstrap/react-bootstrap/issues/1301
i will put sample code of the link above here

const Menu = React.createClass ({
  getInitialState () {
    return {
      navExpanded: false
    }
  },

  setNavExpanded(expanded) {
    this.setState({ navExpanded: expanded });
  },

  closeNav() {
    this.setState({ navExpanded: false });
  },

  render() {
    return (
      <div>
        <Navbar onToggle={this.setNavExpanded}
                expanded={this.state.navExpanded}>
          <Navbar.Header>
            <Navbar.Brand>
              <Link to="some url">Main</Link>
            </Navbar.Brand>
            <Navbar.Toggle />
          </Navbar.Header>
          <Navbar.Collapse>
            <Nav onSelect={this.closeNav}>
              { this.renderMenuItem() }
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      </div>
    )
  }

wish of those help I have a bootstrap dropdown but i am not able to set the selected menu item as default selected dropdown item? , Try this

$(function() {
  $(".dropdown-menu li a").click(function() {
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="drpDownCat" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Select a Category<span class="caret"></span>
  </button>

  <ul class="dropdown-menu" aria-labelledby="drpDownCat">
    <li><a class="dropdown-item" href="#">Category 1</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 2</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 3</a>
    </li>
    <li><a class="dropdown-item" href="#">Category 4</a>
    </li>
  </ul>
</div>

should help you out Need some help here guys and gals. Mobile menu will not collapse by default. I've noticed the asp control is not passing the CSS however it's passing it for the sidebar menu which IS closed by default. I had to target .ms-core-navigation to get the collapse/expand to work but on the first click it glitches and thinks it's already expanded so it re-animates expansion. , Try to add the following code in your masterpage:

<div id="navBackground" class="navbar navbar-static-top">
        <div id="navContainer" class="container">
            <div class="ms-dialogHidden">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <SharePoint:SPLinkButton runat="server" NavigateUrl="~sitecollection/" CssClass="navbar-brand">Your website brand name</SharePoint:SPLinkButton>
                </div>
                <div class="collapse navbar-collapse" id="bs-navbar-collapse">
                    <div class="ms-displayInline ms-core-navigation ms-dialogHidden">
                        <asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
                            <PublishingNavigation:PortalSiteMapDataSource ID="topSiteMap" runat="server" EnableViewState="false" SiteMapProvider="GlobalNavigationSwitchableProvider" StartFromCurrentNode="true" StartingNodeOffset="0" ShowStartingNode="false" />
                            <SharePoint:AspMenu ID="TopNavigationMenu" runat="server" EnableViewState="false" DataSourceID="topSiteMap" AccessKey="&lt;%$Resources:wss,navigation_accesskey%&gt;" UseSimpleRendering="true" UseSeparateCss="false" Orientation="Horizontal" StaticDisplayLevels="1" AdjustForShowStartingNode="true" MaximumDynamicDisplayLevels="2" SkipLinkText="" />
                        </asp:ContentPlaceHolder>
                    </div>
                </div>
            </div>
        </div>
    </div>

(function (module) {
    /**
     * Make top nav conform to bootstrap
     */
    module.initializeNavBarMenu = function () {
        // Get the generated sharepoint id
        var spListMenuId = jQuery("#navBackground .ms-core-listMenu-horizontalBox").attr("id");

        jQuery("#" + spListMenuId).removeClass("ms-core-listMenu-horizontalBox");
        jQuery("#" + spListMenuId + ">ul").removeClass("root ms-core-listMenu-root static").addClass("nav navbar-nav");
        jQuery("#" + spListMenuId + ">ul>li.static").removeClass("static");
        // All dropdown menu
        jQuery("#" + spListMenuId + " ul>li.dynamic-children").removeClass("dynamic-children").addClass("dropdown");

        // Transform header term navigation to normal term nav
        // With Link (page, subsite, etc...)
        jQuery("#" + spListMenuId + " ul>li>a>span").replaceWith(function(){
            var elmt = jQuery(this).find("span.menu-item-text")[0];
            return elmt != null ? elmt.outerHTML : "";
        });
        // Without Link (folder)
        jQuery("#" + spListMenuId + " ul>li>span").replaceWith(function(){
            var elmt = jQuery(this).find("span.menu-item-text")[0];
            return elmt != null ? '<a href="">' + elmt.outerHTML + '</a>' : "";
        });

        jQuery("#" + spListMenuId + " ul>li.dropdown>a").removeClass().addClass("dropdown-toggle ms-core-listMenu-item").attr("aria-expanded","false").attr("aria-haspopup","true").attr("role","button").attr("data-toggle","dropdown");
        jQuery("#" + spListMenuId + " ul>li>ul").removeClass().addClass("dropdown-menu");
    }
    /**
     * Auto Hover for sub-menus
     */
    module.openOnHoverNavBarSubMenus = function () {
        // Same value of minimal width befor the transformation of menu
        // --> Show 'src/less/mixins/_mediaQuery.less' for the list of screen
        var minWidth = 768; // 768px is for tablet screen

        function toggle (event)
        {
            jQuery(this).toggleClass("open");
        }

        if (jQuery( document ).width() >= minWidth)
        {
            // Remove click and tap
            jQuery('.dropdown [data-toggle=dropdown]')
                .on('click tap', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                });

            jQuery('.dropdown').on('mouseenter mouseleave click tap', toggle);
        } else {
            // Add click event for bootstrap sub-menu
            jQuery('ul.dropdown-menu [data-toggle=dropdown]')
                .on('click tap', function(event) {
                    event.preventDefault();
                    event.stopPropagation();
                    jQuery(this).parent().siblings().removeClass('open');
                    jQuery(this).parent().toggleClass('open');
                });
        }
    }

    return module;
})(MyModule.Init);

this one helps. I'm new in bootstrap and I'm using sidebar menu group tree from http://bootsnipp.com/snippets/featured/sidebar-menu-group-tree. All I want is to set it collapsed by default when the page load. , You have to remove these lines:

//$("#left ul.nav li.parent.active > a > span.sign").find('i:first').addClass("icon-minus");
//$("#left ul.nav li.current").parents('ul.children').addClass("in");

!function ($) {

    $(document).on("click","#left ul.nav li.parent > a > span.sign", function(){          
        $(this).find('i:first').toggleClass("icon-minus");      
    }); 

}(window.jQuery);