jquery两个div互换_javascript – Jquery多个div切换

好.我不会花费很长时间才能知道我在这里学习jQuery并且可能以最笨拙的方式解决这个问题.这就是我在这里的原因.

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

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

请注意,效果是面板的不同div和每次(主)的同一div.当然,最好是：

a)当单击一个新图标而不关闭面板时,jQuery关闭前一个面板,移除close-btn,向后滑动主面板,然后打开触发新面板.

要么

b)它关闭前一个面板,删除close-btn但保持主要打开(我认为这已经过度复杂).

menu here

filter here

search here

basket here

account here

content will be here

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')

})

})

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