jQuery Plus / ناقص أو توسيع / ​​انهيار في القائمة

Question

يريد أي شخص أن يكون لديك صدع في محاكاة ما فعلته بي بي سي على محتوياتهم المصفوفة الرئيسية مع أيقونات زائد / ناقص تظهر / تخفي العناصر في قائمة. http://www.bbc.co.uk/

لقد حاولت القيام بذلك ولكن حتى الآن التأثير ليس صحيحا تماما.

أو هل هناك مكون إضافي أو شيء يسمح لك بإجراء شيء مماثل؟

Answer 1

شكرا لردك. لقد حاولت هذا ولكن بدا رائحة كريهة قليلا لما كنت أفعله. بالإضافة إلى أنني أردت تنفيذ الرمز عدة مرات على أقسام مختلفة من الموقع.

في النهاية وجدت مكون إضافي يسمى Clouglapsorz، https://github.com/akuzemchak/collapsorz. الذي يفعل بالضبط ما أردت.

شكرا لمساعدتكم على أي حال. مقدر جدا.

Answer 2

هذه مجرد مسألة مختبئة وإزالة العناصر:

<a href="javascript:void(0)" click="$('#somelist li:visible:last').hide()">+</a>
<a href="javascript:void(0)" click="$('#somelist li:hidden:first').show()">-</a>

بالطبع، سترغب في ربط ذلك بشيء يضع CSS المناسب لكل عنصر عند تحميل الصفحة. (لذلك يمكنك تتبع عدد العناصر التي تريد عرضها.

يمكنك حتى تجربة ذلك في هذه الصفحة:

$('.nav li:visible:last').hide()

إذا كنت تستخدم Firebug، فعادة ما عليك تشغيل هذا، وسترى تغيير شريط NAV: "الأزرار" في الأعلى ستختفي، واحدا تلو الآخر في كل مرة تقوم فيها بتشغيله.

ربما يمكنك التعامل مع هذا الجزء ولكن هنا على أي حال.

<style>
  .hideme {
    display:none;
  }
</style>
<?php
$num_of_items = 5;
$items = array('one', 'two', 'three', 'four', 'five', 'six', 'seven');
echo "<ul id='somelist'>";
for($i=0;$i<sizeof($items);$i++) {
  echo "<li".(($i<$num_of_items)?"":" class='hideme'").">".$items[$i]."</li>";
}
echo "</ul>";
?>