实现SideNav，它可以在一个页面上多个吗？

Question

我想在同一页面上使用多个sidenavs，我已经制作了HTML结构：

<li class="top_icons">
            <a href="#" data-activates="slide-member" class="open_slide">Member</a>

        </li>
        <li class="top_icons">
            <a href="#" data-activates="slide-language" class="open_slide">Language</a>
        </li>
        <li class="top_icons">
            <a href="#" data-activates="slide-search" class="open_slide">Search</a>
        </li>
        <li class="top_icons">
            <a href="#" data-activates="slide-cart" class="open_slide open_cart">Cart</a>
        </li>

<!-- # 1 -->
<div id="slide-member" class="side-nav">
Member
<div>
<!-- # 2 -->
<div id="slide-language" class="side-nav">
 Member
<div>
<!-- # 3 -->
<div id="slide-search" class="side-nav">
Member
<div>
<!-- # 4 -->
<div id="slide-cart" class="side-nav">
 Member
<div>

问题在于，当4个sidenavs中的任何一个处于活动状态时，另一个sidenavs被调用。第二个打开时它高于/低于前一个。如何在调用新的sidenav时关闭它？所以在页面上总是只有一个sidenav。

谢谢！