Quiero cerrar mi menú cuando el usuario hace clic fuera del menú, no solo fuera del elemento de la barra de navegación. Debido a que tengo más colapsos en mi menú, esta solución no funcionó para mí:¿Cómo cerrar una barra de navegación contraída abierta al hacer clic fuera del elemento de la barra de navegación en Bootstrap 3? El menú desaparece cuando hago clic fuera del menú, pero cuando hago clic en el enlace con un menú desplegable, todo el menú se colapsa.

<div class="collapse navbar-collapse nav-mobile" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        <li class="list-group panel">
            <a href="#submenu-1" class="list-group-item" data-toggle="collapse" data-parent="#MainMenu">Webshop</a>
            <ul class="collapse" id="submenu-1">
                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Industriële verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Promotionele verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Gelamineerde verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Enveloppen &verzend verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Medische verpakkingen</a>
                <a href="javascript:;" class="list-group-item">Co-packing</a>
            </ul>
        </li>
    </ul>