0

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

/// 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

任何建议都非常感谢！

4

2 回答 2

0

在 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>

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

于 2013-10-29T14:18:26.440 回答
0

谢谢伊利亚斯，我会玩这个。我认为问题可能在于 zepto 不支持 scrollTop。如果可以的话，我很想保留 zepto 的内置选项，只是不确定我的编码技能是否能够胜任！

于 2013-11-20T12:57:12.490 回答