Bootstrap 3 collapse

Занялся версткой меню на bootstrap, код следующий

HTML:

          
<div class="sidebar-nav">
  <a class="btn btn-primary btn-block" data-toggle="collapse" href="#collapse-nav" aria-expanded="true" aria-controls="collapse-nav"><span class="glyphicon glyphicon-menu-hamburger"></span> Наши товары</a>
  <div class="collapse in" id="collapse-nav" aria-expanded="true">
    <ul class="nav-list">
      <li>
        <a class="cat-name" data-toggle="collapse" href="#collapse-subcat" aria-expanded="false" aria-controls="collapse-subcat">Cat 1</a>
        <ul class="row collapse" id="collapse-subcat" aria-expanded="false">
          <li class="col-sm-4">
            <ul>
              <li class="dropdown-header"><a href="#">Subcat 1</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <li class="col-sm-4">
            <ul>
              <li class="dropdown-header"><a href="#">Subcat 1</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
          <li class="col-sm-4">
            <ul>
              <li class="dropdown-header"><a href="#">Subcat 1</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>                   
      </li>
      <li>
        <a class="cat-name" href="#" class="dropdown-toggle" data-toggle="dropdown">Cat 1</a>
      </li>
      <li>
        <a class="cat-name" href="#" class="dropdown-toggle" data-toggle="dropdown">Cat 3</a>
      </li>
      <li>
        <a class="cat-name" href="#" class="dropdown-toggle" data-toggle="dropdown">Cat 4</a>
      </li>
      <li>
        <a class="cat-name" href="#" class="dropdown-toggle" data-toggle="dropdown">Cat 5</a>
      </li>
    </ul>
  </div>
</div>

Как видно из кода, то есть выпадающий элемент #collapse-nav, dyenhb внутри которого есть еще один выпадающий элемент #collapse-subcat. Все вроде бы работает, но есть одно но... Блоки закрываются при повторном нажатии на соответствующую ссылку, а нужно еще чтобы все блоки сворачивались (иначе говоря все меню) при клике в любое место окна за пределами меню.
Для #collapse-nav подходит

Код:

$(document).on('click',function(){
    $('#collapse-nav').collapse('hide');
})

Для вложенного элемента #collapse-subcat такой подход не подходит. Кто знает как решить проблему?