在Bootstrap中单击面板主体中的链接时，关闭面板崩溃

Question

我有一个基于崩溃的导航。它看起来像这样的一组面板：

<div class="panel panel-default">
    <div class="panel-heading"><a href="#currencies" data-toggle="collapse" data-parent="#accordion"><i class="fa fa-money"></i> Currencies</a>
    </div>
    <div id="currencies" class="panel-collapse collapse in">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li><a href="#currencies-5" data-toggle="tab"><i class="fa fa-angle-right"></i> Japanese Yen</a>
                </li>
                <li><a href="#currencies-6" data-toggle="tab"><i class="fa fa-angle-right"></i> Swiss Franc</a>
                </li>
                <li><a href="#currencies-7" data-toggle="tab"><i class="fa fa-angle-right"></i> USD Index</a>
                </li>
                <li><a href="#currencies-8" data-toggle="tab"><i class="fa fa-angle-right"></i> Mexican Peso</a>
                </li>
                <li><a href="#currencies-9" data-toggle="tab"><i class="fa fa-angle-right"></i> New Zealand $</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="panel panel-default">
    <div class="panel-heading"><a href="#energies" data-toggle="collapse" data-parent="#accordion"><i class="fa fa-sun-o"></i> Energies</a>
    </div>
    <div id="energies" class="panel-collapse collapse">
        <div class="panel-body">
            <ul class="nav nav-tabs">
                <li><a href="#energies-1" data-toggle="tab"><i class="fa fa-angle-right"></i> Crude Oil</a>
                </li>
                <li><a href="#energies-2" data-toggle="tab"><i class="fa fa-angle-right"></i> Rbob Gasoline</a>
                </li>
                <li><a href="#energies-3" data-toggle="tab"><i class="fa fa-angle-right"></i> Heating Oil</a>
                </li>
                <li><a href="#energies-4" data-toggle="tab"><i class="fa fa-angle-right"></i> Natural Gas</a>
                </li>
            </ul>
        </div>
    </div>
</div>

每个面板都会打开包含更多链接的折叠。

默认情况下，Bootstrap会在打开另一个面板时关闭一个面板，但我想要完成的是当单击面板体内的链接时，折叠会关闭，甚至是更多，这只发生在移动设备上（仅@media屏幕和（最大宽度：768px））。

例如，使用上面的代码，当前打开的崩溃货币，当点击来自内部货币的任何链接时，我需要关闭。

我试过以下但没有运气：

$(function() {
  $('ul.nav-tabs li a').click(function (event) {
    $('.panel-collapse').collapse('hide');
  }
});

这是Plunker for reference。

任何提示？