Kredov long

Bootstrap 3 collapse

Тема в разделе "Open Source", создана пользователем partizzzzzan, 31 мар 2015.

  1. partizzzzzan

    partizzzzzan

    Регистрация:
    21 июн 2012
    Сообщения:
    20
    Симпатии:
    1
    Занялся версткой меню на 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 такой подход не подходит. Кто знает как решить проблему?