ठीक है। यह काम करने में कोई भी समय नहीं लगेगा कि मैं यहां jQuery सीख रहा हूं और शायद इस बारे में सबसे अधिक कैक-हाथ तरीके से हो सकता है। यही कारण है कि मैं यद्यपि यहाँ हूँ।Jquery एकाधिक div टॉगल
मैं एक "पैनल" आधारित मेनू सिस्टम बना रहा हूं जो कई अलग-अलग फ़ंक्शंस (मेनू, फ़िल्टर, खोज, टोकरी और खाता) प्रदान करता है। मेरे पास 99% है जहां मैं बनना चाहता हूं। दरअसल यदि आप मेनू आइकन (उदाहरण के रूप में) पर क्लिक करते हैं तो आपको सटीक प्रभाव दिखाई देगा। इसे फिर से क्लिक करें और सबकुछ सही है।
मेरी समस्या तब होती है जब उपयोगकर्ता अपने प्रारंभिक "पैनल" के साथ दूसरे आइकन पर क्लिक करता है। अब आप मेरे ज्ञान में अंतराल देख सकते हैं।
कृपया ध्यान दें कि पैनल पैनल के लिए एक अलग div पर और प्रत्येक बार (मुख्य) पर एक ही div पर प्रभाव है। स्वाभाविक रूप से यह सबसे अच्छा होगा यदि 0:ए) पैनल को बंद किए बिना किसी नए आइकन पर क्लिक करते समय jQuery पिछले पैनल को बंद कर देता है, क्लोज-बीटीएन को हटा देता है, मुख्य को वापस स्लाइड करता है और फिर नया पैनल आग लगाता है। या बी) यह पिछले पैनल को बंद करता है, बंद-बीटीएन को हटा देता है लेकिन मुख्य खुला रहता है (मुझे लगता है कि यह जटिल हो रहा है)।
एचटीएमएल
<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>
सीएसएस
#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')
})
})
बहुत धन्यवाद, अग्रिम में, किसी भी संकेत दिए गए के लिए .... मेरे सिर में दर्द!
आप कितने अद्भुत इंसान हैं;) बहुत बहुत धन्यवाद। मैं दोपहर के भोजन के लिए बाहर निकलता हूं, वापस आ जाता हूं और आप मेरे सोमवार को हुए हैं। मुझे आशा है कि आपको एहसास होगा कि इसका मतलब क्या है :) –
ओह, और आलोचना के लिए आपके सौम्य दृष्टिकोण के लिए "धन्यवाद" :) –
मैं समझता हूं .. कभी भी .. हैप्पी कोडिंग .. :) और हाँ, अगर आप उत्तर दे सकते हैं और जवाब स्वीकार कर सकते हैं आपकी सहायता की.. ;) –