متداخلة القائمة الأكورديون في مسج
سؤال
لدي قائمة تنفيذها باستخدام مجموعة متداخلة الأكورديون ، 1
و 2
, كل العناصر ، a
و b
.
أود أن تنفيذ المنطق التالي:
عندما كنت فوق
1a
, سوف تحصل على البيانات من1a
واثنين من القائمة الفرعية2a
,2b
عندما كنت فوق
2a
,2b
سوف تحصل على البيانات من كل ، على التوالي.
المشكلة
النتيجة المرجوة:
- أريد فقط لعرض
nth-most
عنصر اخر انقر فوق ، تنهار كل الآخرين. - عند التهيئة فقط
1a
و1b
يجب أن تكون مرئية.
النتيجة الحالية:
- بالنقر على
1b
, ثم على2b
,1b
لا تزال واضحة تماما.
شفرة جافا سكريبت
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
HTML:
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
</div>
<div>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
المحلول
فقط عدد قليل من التغييرات على ترتيب العناصر في HTML الخاص بك وتحصل على سلوك كنت تبحث عن.في البداية الآن فقط 1a و 1b مفتوحة.وبالمثل عند النقر على 1b الآن أنه سيتم إغلاق 1a والتي سوف إخفاء أي فتح 2a/2b القسم أيضا.
$(document).ready(function() {
$("#acc1").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc1',
clearStyle: true
});
$("#acc2").accordion({
active:".ui-accordion-left",
alwaysOpen: false,
autoheight: false,
header: 'a.acc2',
clearStyle: true
});
});
<ul id="acc1" class="ui-accordion-container">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc1">1a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 1a<br/>
data of 1a<br/>
data of 1a<br/>
<ul class="ui-accordion-container" id="acc2">
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2a
<span class="ui-accordion-right"></span>
</a>
<div>
data of 2a<br/>
data of 2a<br/>
data of 2a<br/>
</div>
</li>
<li>
<div class="ui-accordion-left">
</div>
<a class="ui-accordion-link acc2">2b
<span class="ui-accordion-right"></span></a>
<div>
data of 2b<br/>
data of 2b<br/>
data of 2b<br/>
</div>
</li>
</ul>
</div>
</li>
<li>
<div class="ui-accordion-left"></div>
<a class="ui-accordion-link acc1">1b
<span class="ui-accordion-right"></span></a>
<div>
data of 1b<br />
data of 1b<br />
dta of 1b <br />
</div>
</li>
</ul>
</body>
لا تنتمي إلى StackOverflow