jQuery扩展器&无序列表

本文关键字：列表 无序 扩展器 jQuery | 更新日期: 2023-09-27 17:50:33

我正在尝试这里找到的jQuery扩展器插件。它在处理常规文本时工作得很好，但是当切片点位于<LI>标记的中间时，它的行为有点奇怪。

关于如何让它表现得更优雅一点，有什么提示/建议吗?以下是我要寻找的优先顺序:

  • Read More与拆分列表项在同一行，展开显示列表项的其余部分
  • 改变它，这样我们就不会在列表项的中间分裂，并在它下面的另一个无序列表中显示剩余的列表项

我对jQuery有点陌生，所以请耐心听我说。如果你有任何问题，请给我留言，我会更新我的帖子。

谢谢!

jQuery扩展器&无序列表

要获得这种行为可能需要大量的扩展，这可能比它的价值更多的麻烦。它实际上是为内联元素而不是一系列块元素设计的。无论如何，这里是一个自定义的代码片段，希望它能做你想要的:

小提琴: 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);
相关文章：