Question

我正在使用以下代码段来显示/隐藏网页中的大块文本。

/// Hide the extra content initially, using JS so that if JS is disabled, no problemo:
$('.read-more-content').addClass('hide')

// Set up a link to expand the hidden content:
.before('<a class="read-more-show" href="#">+more</a>')

// Set up a link to hide the expanded content.
.append(' <a class="read-more-hide" href="#">-less</a>');

// Set up the toggle effect:
$('.read-more-show').on('click', function(e) {
  $(this).next('.read-more-content').removeClass('hide');
  $(this).addClass('hide');
  e.preventDefault();
});

$('.read-more-hide').on('click', function(e) {
  $(this).parent('.read-more-content').addClass('hide').parent().children
('.read-more-show').removeClass('hide');
  e.preventDefault();
});

它适用于a）小块文本或b）页面末尾的文本块。但是对于页面中的长文本块（我的情况），我遇到了一个问题：单击“更多”链接工作正常，但向下滚动并单击“较少链接”虽然它隐藏了扩展文本，但不会切换回来直到“更多链接”相反，你发现自己在页面下方。想知道是否有解决方案吗？喜欢使用锚点切换？我目前在我的页面上有以下工作，但我的jquery技能非常基本，我无法弄清楚如何适应这两者。 //滚动到锚文本

$('.scrollTo').on('click', function(e) {
    e.preventDefault();
    Foundation.lib_methods.scrollTo($(window), $($(e.currentTarget).attr('href')).offset().top, 200);
});

该网站建立在Foundation 4中，因此任何解决方案都需要与zepto以及jquery兼容。

此处提供了指向页面设置的链接 http://tinyurl.com/o4y42yx

任何建议最受赞赏！

Answer 1

在core.js文件中，用以下内容替换第24行到第27行：

$('.read-more-hide').on('click', function(e) {
      $('html,body').animate({
        scrollTop: $(this).parents('.row').offset().top //scrolls up to the div with class "row" right under the +more link
        }, 800); 
  $(this).parent('.read-more-content').addClass('hide').parent().children('.read-more-show').removeClass('hide');
  return false;
});

我正在测试它并且它最初没有工作，后来我通过禁用html文件中的所有脚本调用（删除了<script src>）并在头部自己调用了jquery来测试它工作。您可能想要检查自己导致冲突的原因。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

它需要更多时间，目前我没有它来搜索它并提出更合适的解决方案。我希望这会有所帮助。

Answer 2

谢谢伊利亚斯，我会玩弄这个。我认为问题可能在于zepto不支持scrollTop。如果可以的话，我热衷于保留zepto的内置选项，只是不确定我的编码技巧是否适合它！

更多/更少内容切换大块文本

2 个答案: