Question

我们正在尝试使用jQuery点来切换/显示被截断的文本。

除了我们无法解决如何：

之外，一切都在揭示

删除揭密时的初始截断内容（原始截断的文本仍然存在）
在揭示中显示一个更多的链接（我们最终有两个，但只有原来的一个关闭了揭示）

任何有关正确方向的帮助或指示都会非常感激 - 我们的jquery非常抱歉。

jsfiddle：http://jsfiddle.net/Lsuojcb1/2/

我们的jQuery设置：

// Initialise when dom is ready
$(document).ready(function() {

  // Initialise if .more-reveal is on the page
  if ($(".more-reveal")[0]) {

    // truncate text on page load
    $(".more-reveal").dotdotdot({
      watch: "window",
      after: "a.more-link"
    });

    // store original content before truncation
    var content = $(".more-reveal").triggerHandler("originalContent");

    // reveal text on more button click
    $('.more-reveal').find('a.more-link').on('click', function () {
      if (content != '') {
        $(this).closest('.more-reveal').toggleClass('more-closed more-open').append(content);
      } else {
        $(this).closest('.more-reveal').toggleClass('more-closed more-open');
      }
      return false;
    });
  }
});

Answer 1

第二个按钮在单击时未触发的原因是因为事件不再附加到复制的元素。使用clone复制元素和事件。

小提琴： http://jsfiddle.net/Lsuojcb1/7/

// store original content before trancation
var content = $(".more-reveal").triggerHandler("originalContent");
//remove the link button
content.splice(-2,2);

// reveal text on more button click
$('.more-reveal').find('a.more-link').on('click', function () {
  if (content != '') {
    $(this).closest('.more-reveal').toggleClass('more-closed more-open').append(content);
      //if open, CLONE link button and add, hide short text and button 
      //else remove the cloned button and show short text
      if ($(this).closest('.more-reveal').hasClass('more-open')) {
          $(this).closest('.more-reveal').children('p').first().hide();
          $(this).closest('.more-reveal').children('a').first().hide();
          $(this).closest('.more-reveal').append($(this).clone(true));
      } else {
          $(this).closest('.more-reveal').children('p').first().show();
          $(this).closest('.more-reveal').children('a').first().show();
          $(this).closest('.more-reveal').children('a').last().remove();
      }
  } else {
    $(this).closest('.more-reveal').toggleClass('more-closed more-open');
  }
  return false;
});

使用jquery dot dot dot创建更多/更少的文本显示

1 个答案: