javascript - 在 Rails 应用程序中隐藏标签云

Question

目前，我在我的应用程序中使用 gem 'acts-as-taggable-on'。现在我有一个像这样的标签云:

  <div class="tag_cloud_show pull-sm-right col-sm-2">
    <% tag_cloud Article.tag_counts, %w[s m l] do |tag, css_class| %>
      <%= link_to tag.name, tag_path(tag.name), class: css_class %>
    <% end %>
  </div>

现在，如果窗口浏览器宽度达到特定值，我想隐藏标签云(我自己测试过，我不知道这是否是最好的方法)。所以，我在我的 application.js 中写了一些 jQuery 代码:

$(document).ready(function () {
   function hideTagCloud () {
      if ($(window).width() < 760)  {
        $(".tag_cloud").hide();
      }
   };

   function showTagCloud () {
      if ($(window).width() >= 760)  {
        $(".tag_cloud").show();
      }
   };
   hideTagCloud();
   showTagCloud();
});

我现在遇到的问题是，如果我调用函数 showTagCloud()，它将不再隐藏标签云。但如果我不调用它，无论浏览器大小如何，标签云都会被隐藏。一般来说，如果用户使用的是小型智能手机，我只想隐藏标签云，如果我不隐藏它，它会破坏我的索引和显示页面的结构。所以，请你看看我的代码，任何建议将不胜感激。感谢您的宝贵时间。

自定义.css.scss:

.tag_cloud {
  position: relative;
  overflow: auto;
  word-wrap:break-word;
  width: 100px;
  line-height: 1.6em;
  .s { font-size: 0.8em; }
  .m { font-size: 1.2em; }
  .l { font-size: 1.8em; }
}

.tag_cloud_show {
  position: relative;
  width: 100px;
  overflow: auto;
  word-wrap:break-word;
  overflow-wrap: break-word;
  line-height: 1.6em;
  .s { font-size: 0.8em; }
  .m { font-size: 1.2em; }
  .l { font-size: 1.8em; }
}

Answer 1

由于您使用的是基于 div 中的 col-sm-2 类的 Bootstrap - 您只需使用 Bootstrap 的响应式帮助程序类即可根据屏幕分辨率显示/隐藏该 div/元素/浏览器窗口。

具体来说，根据您希望关注的大小 (< 768) 隐藏 div/元素的类是 .hidden-xs 并且应该可以为您解决问题。

<div class="tag_cloud_show pull-sm-right col-sm-2 hidden-xs">
  <% tag_cloud Article.tag_counts, %w[s m l] do |tag, css_class| %>
    <%= link_to tag.name, tag_path(tag.name), class: css_class %>
  <% end %>
</div>

希望对您有所帮助!