单击菜单外部时关闭/折叠手风琴菜单

Question

我有一个相当复杂的手风琴菜单，我需要做两件事...... 当用户点击菜单时，我希望它： 1.关闭/折叠所有标签 和 2.关闭/折叠所有子菜单项。

我不知道任何编程，但html和css，所以我在使用这个手风琴菜单时遇到了很多麻烦。

当我点击其他标签时，我可以让它崩溃，但是当我点击菜单外面时我无法让吸盘关闭（我希望它也可以这样做）。

我在这里也是全新的，我不知道如何解决这个问题。

我有一个带标题/按钮的手风琴，subITEMS，还有一些还有一个subMENU。

以下是我所拥有的一个例子：

        <!-- Accordion menu START -->
        <div id="accordion" class="panel-group" aria-multiselectable="true">
          <div class="list-group panel">

            <!-- Item 1 -->
            <a href="#morocco" role="button"  class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#accordion">Morocco <i class="more-less glyphicon glyphicon-triangle-right"></i></a>
            <div class="collapse" id="morocco">
              <ul>
                <li>
                  <a class="list-group-item strong" href="#">Homepage</a>
                  <ul>
                    <li>
                      <a class="list-group-item strong" href="="#">">Casablanca</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </div>
            <!-- END Item 1  -->

            <!-- Item 2  basically the same as item 1  -->

            <!-- Item 3   -->
            <a href="#france" role="button" class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#accordion">France <i class="more-less glyphicon glyphicon-triangle-right"></i></a>

            <div class="collapse" id="france">
              <!-- Alsace -->
              <a class="list-group-item" href="="#"">Alsace</a>

              <!-- burgundy -->
              <a href="#burgundy" role="button" class="panel-heading list-group-item strong" data-toggle="collapse" data-parent="#burgundy">Burgundy <i class="more-less glyphicon glyphicon-menu-right"></i></a>

              <div class="collapse list-group-submenu list-group-submenu-1" id="burgundy">
                <ul>
                  <li>
                    <a href="="#"" class="list-group-item" data-parent="#burgundySubMenu">Homepage</a>
                    <ul>
                      <li>
                        <a class="list-group-item strong" href="#" target="_self">Dijon</a>
                      </li>
                </ul>
              </div>
            </div>
            <!-- END Item 3 -->
          </div>
        </div>
        <!-- Accordion END -->

我一直在用这个脚本关闭子菜单

  $(document).ready(function() {
    $('#france').on('hidden.bs.collapse', function() {
      console.log('triggered');
      $('#burgundy').collapse('hide');
    });
  });

但是当用户不再使用菜单时，我需要整个手风琴菜单关闭/折叠...我讨厌在不使用时保持打开状态的菜单。

任何帮助都会非常感激......我的智慧结束了！

我为我的草率代码道歉...我可以做css和html，我没有说我擅长它！ :)

我忘了提...这段代码ALMOST工作了......

<script>
$("html").click(function(event) {
    if ($(event.target).closest('#accordion, #burgundy').length === 0) {
          jQuery('.collapse').collapse('hide');
    }
});

</script>

它会关闭手风琴菜单，但是当点击INSIDE菜单时它会打开标签。我需要它在单击另一个选项卡时关闭选项卡并在菜单外单击时关闭整个菜单。