3

我们需要能够限制移动设备上显示的文本数量。我们希望以与各种“阅读更多”插件（http://plugins.learningjquery.com/expander/index.htm）类似的方式这样做，我们在包含 HTML 元素的 div 上调用一些 JS。

问题是，我们不想在大型设备上的文本上调用这些库。是否可以在不引入新库（如 Respond.js）的情况下将媒体查询与某些 CSS 结合使用？

有没有人有更好的方法来限制移动设备上的文本，并提供阅读更多链接？

编辑：我们正在使用媒体查询来处理某些宽度。但是我们想以一种智能的方式截断一个包含一些文本的容器。如果您在移动设备上，并且该 div 包含 1000 个单词，我们希望显示 100 个单词，然后显示一个“阅读更多”按钮来扩展文本。如果您调整窗口大小，此按钮和截断需要无缝消失。

我们现在拥有的是以下内容：

  1. 在页面加载时，将内容 div（包含我们要截断的文本的 div）中的所有内容复制到其上方的 div 中。
  2. 使用 max-width 媒体查询隐藏该 content-div，并显示新的。使用一些 JS 来截断新 div 元素内的文本。
  3. 在新 div 的末尾附加一个按钮，隐藏新 div，并显示旧 div。

有没有更好的方法来处理这个？

4

3 回答 3

3

当页面宽度低于指定数量时，您可以使用 CSS @media 隐藏/显示元素。

HTML：

<p>here is some content.</p>
<p id="extra_content" class="extra_content">here is some extra content</p>
<button id="read_more" class="read_more">Show More</button>

CSS：

@media (max-width: 650px) {
  .extra_content {
    display: none;
  }
  #read_more {
    display: block;
  }
}

.read_more  {
  display: none;
}

.show {
   display: block!important;
}

纯 JavaScript：

document.getElementById("read_more").addEventListener( 'click' , changeClass);

function changeClass() {
  var content = document.getElementById("extra_content");
  var btn = document.getElementById("read_more");
  content.classList.toggle('show');

  if (content.classList.contains("show")) {
      btn.innerHTML = "Show Less";
  } else {
      btn.innerHTML = "Show More";
  }
}

这是一个工作示例：http: //jsfiddle.net/xfgqW/2/

在这里阅读更多：http ://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

使用多个按钮

为了使用多个按钮，我们需要稍微修改一下。基本上我们需要使用一个公共类来查询按钮元素并循环它们以分配点击事件并更改innerHtml。例如：

<button class="read_more">Show More</button>
<p>here is some content.</p>
<p class="extra_content">here is some extra content</p>
<button class="read_more">Show More</button>

document.querySelectorAll("button.read_more").forEach(function(button) {
  button.addEventListener( 'click' , changeClass);
});

function changeClass() {
  var content = document.getElementById("extra_content");
  var buttons = document.querySelectorAll("button.read_more");

  content.classList.toggle("show");

  var buttonText = content.classList.contains("show") ? "Show Less" : "Show More";

  buttons.forEach(function(button) {
    button.innerHTML = buttonText;
  });
}

这是一个带有多个按钮的工作示例：https ://jsfiddle.net/uc8d7w3e/1/

于 2013-04-11T21:44:48.113 回答
0

你想要这样的东西吗？

@media screen and (max-width: 1024px) {
  #read_more {
    display: none;
  }
}
于 2013-04-11T21:45:16.633 回答
0

如果您只需要为大/小屏幕调用 JS，请检查$(window).width().

用于@media (max-width: something)在 CSS 中制定特定规则

于 2013-04-11T21:48:34.563 回答