OK. Nie trzeba długo czekać, aby się nauczyć, że uczę się tutaj jQuery i mogłem to zrobić w możliwie najskryśniejszy sposób. Dlatego jestem tutaj.Jquery wielokrotny div przełącz
Tworzyłem system oparty na "panelu", który zapewnia wiele różnych funkcji (menu, filtr, wyszukiwanie, koszyk i konto). Mam 99% tam, gdzie chcę być. Rzeczywiście, jeśli klikniesz ikonę menu (jako przykład), zobaczysz dokładny efekt. Kliknij ponownie i wszystko jest idealne.
Mój problem pojawia się, gdy użytkownik kliknie inną ikonę z otwartym początkowym "panelem". Teraz możesz zobaczyć luki w mojej wiedzy.
Należy zwrócić uwagę, że efekt dotyczy innego elementu div dla panelu i tego samego div za każdym razem (main). Oczywiście najlepiej by było, gdyby: a) po kliknięciu na nową ikonę bez zamykania panelu jQuery zamyka poprzedni panel, usuwa close-btn, ślizga się z powrotem do głównej, a następnie otwiera ogień do nowego panelu. lub b) zamyka poprzedni panel, usuwa close-btn, ale utrzymuje główny otwarty (myślę, że to już komplikuje).
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')
})
})
Dziękujemy, z góry za wszelkie wskazówki .... moja głowa boli!
Cóż za wspaniały człowiek;) Dziękuję bardzo. Wyskakuję na lunch, wracam, a ty w poniedziałek. Mam nadzieję, że zdajesz sobie sprawę, co to oznacza :) –
Aha, i "Dziękuję" za twoje łagodne podejście do krytyki :) –
Rozumiem .. W każdej chwili .. Szczęśliwe kodowanie .. :) i tak możesz przegłosować i zaakceptować odpowiedź jeśli to pomógł ci ..;) –