Bootstrap list-group collapse on click event

Question

I needed a multi-level menu but Bootstrap don't provide anything like this, so I've made a menu/navbar based on list-group, and it works great, I can add multiple levels of submenus but I have on big problem, it won't collapse until I click on the "Pos1" (check bootply link) or other "Pos...".

I need to solution so that when I click in every other part of the website that menu will collapse.

Here is the code and below it you can find link to bootply:

<div class="container">
    <div id="mainmenu" class="row">
          <div class="list-group panel visible-md visible-lg">
              <a href="#" class="list-group-item"><i class="glyphicon glyphicon-home"></i></a>
          </div>
          <div class="list-group panel">
            <a href="#menupos1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Pos1 <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
            <div class="collapse pos-absolute" id="menupos1">
              <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">SubPos1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
                  <div class="collapse list-group-submenu" id="submenu1">
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos1</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos2</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos3</a>
                    <a href="#" class="list-group-item sub-sub-item" data-parent="#submenu1">SubSubPos4</a>
                  </div>
             <a href="#" class="list-group-item sub-item">SubPos2</a>
             <a href="#" class="list-group-item sub-item">SubPos3</a>
             <a href="#" class="list-group-item sub-item">SubPos4</a>
             <a href="#" class="list-group-item sub-item">SubPos5</a>                                                                    
              </div>
        </div>
    </div>
</div>

Demo: http://www.bootply.com/izpRKwzlYb

It would be great if it only work in medium and large resolution because in xsmall and small it should stay still.

Answer 1

Add data-toggle to Pos1,SubPos1 and add data-target="#submenu1" for SubPos1 items,by adding this when you click on menu items or sub menu items the respective menus will be collapsed.i think this may be help full.

check this in:http://www.bootply.com/fY2Vr9qbDo