के साथ कई accordions को सही ढंग से सॉर्ट करने के लिए कैसे करें यह मेरी पहली बार पोस्टिंग है इसलिए कृपया मुझे बताएं कि क्या मैं पर्याप्त विवरण प्रदान करने में विफल रहता हूं।jQuery
मेरे पास एक पृष्ठ है जिसमें एकाधिक accordions शामिल हैं। मैं कई accordions का उपयोग करना चाहता था क्योंकि मैं चाहता था कि उपयोगकर्ता कई अनुभागों को एक बार में खोल सकें जो accordion के मूल नहीं है।
मैं भी चाहता हूं कि उपयोगकर्ता उन accordions को सॉर्ट करने में सक्षम हों। जिस तरह से पेज वर्तमान में स्थापित है, उपयोगकर्ता बिना किसी समस्या के accordion को सॉर्ट कर सकते हैं।
जब उपयोगकर्ता accordions को सॉर्ट करने के लिए जाता है, तो मेरे पास एक स्क्रिप्ट है जो सभी मौजूदा accordions बंद कर देगी, उनके आईड्स को सरणी में स्टोर करेगी, और फिर उपयोगकर्ता को सॉर्ट करने पर उन्हें फिर से खोलें। वह हिस्सा भी ठीक काम करता है।
समस्या तब होती है जब आप उस अनुभाग को स्थानांतरित करने का प्रयास करते हैं जिसे आप पहले से खोलने वाले दो खंडों के बीच क्रमबद्ध कर रहे हैं। ऐसा प्रतीत नहीं होता है कि jQuery आसानी से बता सकता है कि एक सेक्शन कहां से शुरू होता है और जब वे प्रोग्रामेटिक रूप से बंद होते हैं तो एक समाप्त होता है। ध्यान दें कि अगर वे पहले ही बंद हो चुके हैं, तो यह अपेक्षा के अनुसार काम करता है।
मैंने इस समस्या के कई दृष्टिकोणों की कोशिश की है जिसमें अनुभागों के बीच एक स्पेसर div जोड़ने और साथ ही साथ accordions को नष्ट करने और सॉर्टिंग का लाभ उठाने के बाद उन्हें फिर से शुरू करना शामिल है।
मुझे संदेह है कि समस्या तब होती है क्योंकि जब accordion पहली बार पकड़ लिया जाता है, तो अनुभाग खुले होते हैं। लेकिन उस बिंदु पर, मैं सभी वर्गों को बंद करता हूं और भले ही सेक्शन बंद हो जाता है, फिर भी जब आप दो के बीच एक सेक्शन डालने का प्रयास करते हैं तो यह वर्गों को स्पोरैडिक रूप से कूदने का कारण बनता है।
मैंने यह भी देखा है कि accordion कारकों की सामग्री की ऊंचाई। नीचे दिए गए मेरे उदाहरण में, पहला div समस्याओं के कारण समस्याओं का कारण बनता है और आप उन्हें सॉर्ट करने का प्रयास करते हैं लेकिन अन्य कम होते हैं।
यहां मेरे पास कोड है। jQuery बुनियादी jQuery पुस्तकालय और सामान मैंने लिखा मैं सादगी के लिए इनलाइन शामिल है:
<html>
<head>
<link href="/css/flick/jquery-ui.css" media="screen" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Add Accordion stuff
$(".accordion").accordion({
autoHeight: false,
active: false,
collapsible: true
}); // end $(".accordion").accordion
// Add sortables
$('.sortable').sortable({
start: function(e, ui) {
container = $(e.target);
var parent_id = container.parent().parent().attr('id');
expanded_ones = new Array();
var count = 0;
var summary = '';
var child = '';
var active = '';
// now close all other sections
$.each($('#' + parent_id + ' .accordion'), function() {
// get the child element since that has the div id I need
child = $(this).children('div');
// get the active information to see if it is open or closed
active = $(this).accordion('option', 'active');
// check to see if this one is expanded
if(parseInt(active) == active) {
// store this id so we can open it later
expanded_ones[count] = $(child).attr('id');
count++;
// and close the accordion
$(this).accordion({ active: false });
} // end if(parseInt(active) == active)
}); // end $.each($('#' + parent_id + ' .accordion'), function()
}, // end start: function(e, ui)
stop: function(e, ui) {
container = $(e.target);
var parent_elem = '';
// expand the ones that were originally expanded
for(var i = 0; i < expanded_ones.length; i++) {
parent_elem = $('#' + expanded_ones[i]).parent();
$(parent_elem).accordion('option', 'active', 0);
} // end for(var i = 0; i < expanded_ones; i++)
} // end stop: function(e, ui)
}); // end $('.sortable').sortable
}); // end $(document).ready(function() {
</script>
</head>
<body>
<div id="outer">
<div class="box">
<div class="accordion_wrapper sortable" rel="sections">
<div id="accordion_a" class="section_accordion">
<div class="accordion">
<h4>Accordion A</h4>
<div id="accordion_a_content">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
</div>
</div>
<div id="accordion_b" class="section_accordion">
<div class="accordion">
<h4>Accordion B</h4>
<div id="accordion_b_content">
Stuff
</div>
</div>
</div>
<div id="accordion_c" class="section_accordion">
<div class="accordion">
<h4>Accordion C</h4>
<div id="accordion_c_content">
Stuff
</div>
</div>
</div>
<div id="accordion_d" class="section_accordion">
<div class="accordion">
<h4>Accordion D</h4>
<div id="accordion_d_content">
Stuff
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
सलाह के लिए धन्यवाद। मैंने कुछ ऐसा ही कार्यान्वित किया और यह बहुत अच्छा काम करता है। – lokisapocalypse