我一直在创建一个基于“面板”的菜单系统,它提供了许多不同的功能(菜单,过滤器,搜索,篮子和帐户).我有99％在我想要的地方.实际上,如果单击菜单图标(作为示例),您将看到确切的效果.再次点击它,一切都很完美.

当用户点击另一个图标并打开其初始“面板”时,我的问题就来了.现在你可以看到我所知的差距.

请注意,效果是面板的不同div和每次(主)的同一div.当然,最好是：
a)当单击一个新图标而不关闭面板时,jQuery关闭前一个面板,移除close-btn,向后滑动主面板,然后打开触发新面板.
要么
b)它关闭前一个面板,删除close-btn但保持主要打开(我认为这已经过度复杂).

HTML

<div id="mainpanel">
<div class="menunav">
    <div class="toggle menu-btn"></div>
    <div class="toggle filter-btn"></div>
    <div class="toggle search-btn"></div>
    <div class="toggle basket-btn"></div>
    <div class="toggle account-btn"></div>
</div>
</div>
<div class="togglepanel mainmenu">
menu here
</div>
<div class="togglepanel filter">
filter here
</div>
<div class="togglepanel search">
search here
</div>
<div class="togglepanel basket">
basket here
</div>
<div class="togglepanel account">
account here
</div>
<main>
content will be here
</main>

CSS

#mainpanel {
position: fixed;
display: table;
top: 0;
left: 0;
width: 125px;
height: 100%;
background: #206ba4;
vertical-align: middle;
z-index: 9999;}

main {
position: relative;
top: 0;
margin-left: 125px;
transform: translateX(0);
transform: translateY(0);
transition: transform .5s;}

.move {
transform: translateX(300px) !important;}

.menunav {
display: table-cell;
color: #fff;
z-index: 1001;
margin: 20px 0 0;
text-align: center;
vertical-align: middle;}

.menunav div {
display: block;
width: 100%;
margin: 0 0 30px;
text-align: center;}

.menu-btn:after,.filter-btn:after,.search-btn:after,.basket-btn:after,.account-btn:after,.close-btn:after {
font-family: FontAwesome;
content: "menu";
font-size: 1.8em;
font-weight: 200;
color: #fff;
display: block;
height: 1em;
width: 1em;
margin: 0 0 0 30%;
cursor: pointer;}

.filter-btn:after {
content: "filter";}

.search-btn:after {
content: "search";}

.basket-btn:after {
content: "basket";}

.account-btn:after {
content: "account";}

.close-btn:after {
content: "close";}

.mainmenu,.filter,.search,.basket,.account {
position: fixed;
width: 300px;
top: 0;
left: 125px;
height: 100%;
background: #54a4de;
transform: translateX(-100%);
transition: transform .5s;
z-index: -1;}

.expand {
transform: translateX(0px);}

jQuery的

jQuery(function($){
    $('.menu-btn').click(function(){
    $('.mainmenu').toggleClass('expand')
    $('main').toggleClass('move')
    $('.menu-btn').toggleClass('close-btn')
     })
})
jQuery(function($){
    $( '.filter-btn' ).click(function(){
    $('.filter').toggleClass('expand')
    $('main').toggleClass('move')
    $('.filter-btn').toggleClass('close-btn')
     })
})
jQuery(function($){
    $( '.search-btn' ).click(function(){
    $('.search').toggleClass('expand')
    $('main').toggleClass('move')
    $('.search-btn').toggleClass('close-btn')
 })
})  
jQuery(function($){
    $( '.basket-btn' ).click(function(){
    $('.basket').toggleClass('expand')
    $('main').toggleClass('move')
    $('.basket-btn').toggleClass('close-btn')
     })
})  
jQuery(function($){
    $( '.account-btn' ).click(function(){
    $('.account').toggleClass('expand')
    $('main').toggleClass('move')
    $('.account-btn').toggleClass('close-btn')
     })
})

Here is the jsfiddle

非常感谢,提前,任何指针……我的头疼！