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

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

除了html和css之外，我不懂任何编程，所以我很难让这个手风琴菜单正常工作

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

我也是新来的，我不知道该怎么做

我有一个带有标题/按钮、子项的手风琴，还有一些还有子菜单

下面是我得到的一个例子：

        <!-- 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 -->

但是当用户不再使用菜单时，我需要关闭/折叠整个手风琴菜单。。。我讨厌不使用时一直打开的菜单

任何帮助都将非常感谢。。。我真是束手无策

我为我草率的代码道歉。。。我会做css和html，我没说我擅长它！：）

我忘了提。。。这个代码几乎成功了

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

</script>

$（“html”）。单击（函数（事件）{
if（$（event.target）.closest（'#accordion，#burgendy'）。length==0）{
jQuery（'.collapse'）.collapse（'hide'）；
}
});

---

它会关闭手风琴菜单，但在菜单内单击时会使选项卡保持打开状态。我需要它在单击另一个选项卡时关闭选项卡，在单击菜单外时关闭整个菜单。

您发现过吗？这是很久以前的事了！：）我认为是这样。否则我就做了别的事。。。我不记得了。但是，谢谢你的回复！！！你发现了吗？这是很久以前的事了！：）我认为是这样。否则我就做了别的事。。。我不记得了。但是，谢谢你的回复！！！

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

</script>