Question

我正在尝试找到here的jQuery扩展程序插件。它在处理常规文本时效果很好，但当切片点位于<LI>标记的中间时，行为有点奇怪。

有关如何让它更优雅地表现出来的任何提示/建议？以下是我要按照偏好顺序寻找的内容：

阅读更多与拆分列表项相同的行，并展开显示列表项的其余部分
更改它以便我们不会在列表项的中间拆分，并在其下方的另一个无序列表中显示剩余的列表项

我对jQuery有点新意，所以请耐心等待一下。如果您有任何问题，请给我留言，我会更新我的帖子。

谢谢！

Answer 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);

jQuery Expander＆amp;无序列表

1 个答案: