jQuery Expander и неупорядоченные списки - PullRequest
Новая
       3

jQuery Expander и неупорядоченные списки

0 голосов
/ 18 апреля 2011

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

Любые советы / предложения о том, как заставить это вести себя немного более изящно?Вот что я искал в порядке предпочтения:

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

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

Спасибо!

1 Ответ

1 голос
/ 18 апреля 2011

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

fiddle: 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);
...