响应式设计 - 仅在较小屏幕上的“阅读更多"按钮 [英] Responsive design - A Read More button only on smaller screens

问题描述

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

We need to be able to limit the amount of text shown on a mobile device. We were hoping to do so in a similar way to the various 'Read More' plugins going around (http://plugins.learningjquery.com/expander/index.htm) where we call some JS on a div containing HTML elements.

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

The issue is, that we do not want to call these libraries on text on a large device. Is it possible to use media-queries in conjunction with some CSS, without introducing a new library (like Respond.js)?

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

Does anyone have any better approaches to limited text on a mobile device, and providing a read more link?

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

We are using media queries to already handle certain widths. But we would like to truncate a container with some text in it, in an intelligent fashion. If you're on a mobile device, and the div contains 1000 words, we would like to show 100 words, and then a "Read More" button that will expand the text. If you resize the window, this button and the truncating needs to seamlessly disappear.

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

What we have now is the following:

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

有没有更好的方法来处理这个问题?

Is there a better way of handling this?

推荐答案

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

You can hide/show elements when page width is under a specified amount using 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:

Pure 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.例如:

To make this work with multiple buttons we need to modify things slightly. Basically we'll need to query for the button elements using a common class and loop over them to assign the click event and change the innerHtml. For example:

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

Here's a working example with multiple buttons: https://jsfiddle.net/uc8d7w3e/1/

这篇关于响应式设计 - 仅在较小屏幕上的“阅读更多"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！