ठीक है, तो कहीं, कुछ गलत है। जब मैं संस्करण 1.3 का उपयोग कर रहा था तो accordion ठीक काम कर रहा था। जब मैंने jQuery को संस्करण 1.3.2 में अपग्रेड किया, तो अब यह काम नहीं करता है। मुझे नवीनतम संस्करण की आवश्यकता है क्योंकि यह कुछ त्रुटियों को हल कर रहा है जो आईई 6 फेंक रहा था ...
तो यहां कोड है, और jQuery के नवीनतम संस्करण के साथ काम करने के लिए इसे बदलने की क्या ज़रूरत है?
$(function() {
$(".accordion h4").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h4").click(function(){
$(this).next(".accordion div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger("click");
});
एचटीएमएल कुछ ऐसा करता है:
<div class="accordion">
<h4 id="open">Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
<h4>Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
<h4>Content header</h4>
<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>
</div>
मुझे ध्यान रखना चाहिए कि जहां यह काम नहीं कर रहा है, यह है कि जब एक दूसरे पैनल का विस्तार होता है, तो पहला पैनल सामान्य के रूप में गिरना चाहिए - लेकिन 1.3.2 के साथ यह मामला नहीं है ...
* मैंने HTML को अपडेट किया है जो मैं वास्तव में चल रहा था, क्योंकि ऐसा लगता है कि यह HTML / CSS था जो समस्याएं दे रहा था।
मेरे पास सीएसएस सेट था:
li strong{display:block;float:left;width:250px;background:#ccc;}
li em{display:block;float:left;width:700px;background:#ddd;}
इसे "2-कॉलम वाली टेबल जैसी" देने के लिएप्रभाव (और आसान क्लाइंट-सीएमएस संपादन के लिए - "बोल्ड" बटन दबाएं और "i" बटन दबाएं) - लेकिन ऐसा लगता है कि यह उन तत्वों की फ़्लोटिंग थी जो accordion को काम नहीं करते थे। जब मैंने "फ्लोट: बाएं;" हटा दिया - यह सामान्य के रूप में फिर से काम किया।
और यह इस तथ्य से दूर नहीं है कि यह वही सेट-अप jquery1.3.0 के साथ काम करता है लेकिन jquery1.3.2 के साथ नहीं - तो कुछ अभी भी अस्वस्थ है!
उत्तर:
उत्तर № 1 के लिए 1मैं आपके चयनकर्ता पर विश्वास करता हूं $(this).next(".accordion div") काम नहीं करेगा। अगला () केवल अगले भाई को पकड़ लेता है इसलिए बच्चों को दिखने वाला फ़िल्टर करना अजीब है।
शुद्ध सीएसएस क्लास चयनकर्ता की बजाय नोडनाम के साथ चयनकर्ताओं का उपयोग करने का प्रयास करें। उपयोग div.accordian बस के बजाय .accordian अपने जेएस में
प्रयत्न
$(function() {
$("div.accordion h4").eq(2).addClass("active");
$("div.accordion div").eq(2).show();
$("div.accordion h4").live("click", function(){
var $el = $(this);
$el.next()
.slideToggle("slow")
.siblings("div:visible")
.slideUp("slow");
$el.toggleClass("active");
$el.siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger("click");
});
उत्तर № 2 के लिए 1
आपको अपनी Accordion लाइब्रेरी को अपग्रेड करने की आवश्यकता हो सकती है। कुछ शैली चयनकर्ताओं की तरह [@attr] शैली चयनकर्ता जो कि Accordion उपयोगों को पहले ही बहिष्कृत कर दिया गया हो सकता है।