在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（），它不會隱藏標籤雲了。但是如果我不叫它，標籤雲將被隱藏，而不管瀏覽器的大小。一般來說，如果用戶使用小型智能手機，我只想隱藏標籤雲，如果我不隱藏它，它會打破我的索引結構並顯示頁面。所以，你可以看看我的代碼，任何建議，將不勝感激。感謝您的時間。

custom.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類 - 你可以用引導的響應助手類來顯示/隱藏DIV /元基於屏幕分辨率/瀏覽器窗口。

具體而言，根據您想要關注的尺寸隱藏div /元素的類是（< 768），.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> 

希望有所幫助！