Html 如何在其他菜单打开时自动关闭侧面下拉菜单

我已经使用一些html代码创建了边栏下拉菜单，如下所示。此代码运行良好。它完美地打开了所有下拉菜单。但它不会自动关闭以前打开的下拉菜单。每当打开新菜单时，我想自动关闭以前打开的下拉菜单。请帮我做这件事。提前谢谢

<style>
 summary::-webkit-details-marker {
 display: none;
}
summary:focus {
    outline-style: none;
}
article > details > summary {
    display: block;
    padding: 7px 10px 8px;
    font-family: "proximanova-light","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-style: normal;
    color: #fff;
    margin: 10px 0;
    font-size: 16px;
    position: relative;
background-color: #428bca;
}


article > details > summary:hover {
    color: #fff;
    font-size: 16px;
    position: relative;
background-color: #39b3d7;
}

details > p {
    margin-left: 24px;
}
details details {
    margin-left: 36px;
}
details details summary {
    font-size: 14px;
}

</style>





    <div class="sidebar">



<span class="title">Dashboard</span>
    <section>
      <article>

        <details>
          <summary>Advertisers<span class="fa fa-caret-down pull-right fa-lg" style="margin-top: 3px;padding-right:5px;"></span></summary>
            <ul class="sidenav">
    <li class="account "><a href="/advertisers"><em>Overview</em></a></li>
    <li class="settings "><a href="/advertisers/myads"><em>My Ads</em></a></li>
    <li class="settings "><a href="/advertisers/mywaitlist"><em>My Wait List</em></a></li>
    <li class="settings "><a href="/buy"><em>Buy Ads</em></a></li>
    <li class="payment "><a href="/advertisers/mystats"><em>Ad Stats</em></a></li>
    <li class="payment "><a href="/advertisers/approvals"><em>Ad Approvals</em></a></li>
    <li class="separator"></li>
        </ul>
        </details>
      </article>

      <article>
        <details>
          <summary>Account<span class="fa fa-caret-down pull-right fa-lg" style="margin-top: 3px;padding-right:5px;"></span></summary>
            <ul class="sidenav">
    <li class="settings "><a href="/users/account"><em>My Profile</em></a></li>
    <li class="deposit"><a href="/cart/deposit"><em>Deposit Funds</em></a></li>
    <li class="transactions"><a href="/users/transactions"><em>Transactions</em></a></li>
        </ul>
          </details>
      </article> 

</section>


</div>

摘要：：-webkit详细信息标记{
显示：无；
}
摘要：焦点{
轮廓样式：无；
}
文章>详细信息>摘要{
显示：块；
填充：7px 10px 8px；
字体系列：“proximanova light”，“Helvetica Neue”，Helvetica，Arial，无衬线；
字体风格：普通；
颜色：#fff；
利润率：10px0；
字体大小：16px；
位置：相对位置；
背景色：#428bca；
}
文章>详细信息>摘要：悬停{
颜色：#fff；
字体大小：16px；
位置：相对位置；
背景色：#39b3d7；
}
详情>p{
左边距：24px；
}
详情{
左边距：36px；
}
详情摘要{
字体大小：14px；
}
仪表板