Блог

Главная - Вопросы по программированию - Расширитель jQuery и неупорядоченные списки

Расширитель jQuery и неупорядоченные списки

#c# #jquery #expander #html-lists

#c# #jquery #расширитель #html-списки

Вопрос:

Я пробую плагин jQuery expander, который можно найти здесь. Он отлично работает при работе с обычным текстом, но ведет себя немного странно, когда точка фрагмента находится в середине <LI> тега.

Есть какие-нибудь советы о том, как заставить это вести себя немного более изящно? Вот что я бы искал в порядке предпочтения:

  • Подробнее читайте в той же строке, что и разделенный элемент списка, а при расширении отображаются остальные элементы списка
  • Измените это, чтобы мы не разделяли элемент списка в середине, а отображали остальные элементы списка в другом неупорядоченном списке под ним

Я немного новичок в jQuery, так что потерпите меня немного. Если у вас есть какие-либо вопросы, оставьте мне комментарий, и я обновлю свой пост.

Спасибо!

Комментарии:

1. Можете ли вы предоставить jsfiddle того, что вы ищете? Вот один из них, который поможет вам начать; jsfiddle.net/garreh/9YNfd

2. Хорошо, зацените это: jsfiddle.net/9YNfd/4

3. Как вы можете видеть, он разбивается в середине первого <LI> , а затем помещает остаток в новый <LI> под ним

Ответ №1:

Чтобы добиться такого поведения, вероятно, потребуется много взлома для расширения, что, вероятно, доставит больше хлопот, чем того стоит. Он действительно был разработан для встроенных элементов, а не для серии блочных элементов. В любом случае, вот пользовательский фрагмент, который, надеюсь, должен делать то, что вы хотите:

скрипка: http://jsfiddle.net/garreh/z9JwJ

 var de = {
  0: {
    html: '<span class="read_more"><a href="javascript:">Read more</a></span>',
    classname: '.read_more'
  },

  1: {
    html: '<span class="read_less"><a href="javascript:">Read Less</a></span>',
    classname: '.read_less'
  }
};

function toggle(show)
{
  var $li = $('.expandable ul > li');
  var len = $li.length - 1;
  var xy = (show ? [len, 0] : [0, 1]);

  $li.each(function(index) {

    if (index) {
      $(this)[show ? 'show' : 'hide']();
    }

    if (!index || index == len) $(de[xy[1]].classname, this).remove();

    if (index == xy[0])
    {
      var $toggle = $(de[show].html);
      $toggle.find('a').click(function() {
        toggle(xy[1]);
      });
      $(this).append($toggle);
    }

  });
}

toggle(0);