Question

在另一个问题中，我有一个基于页面宽度显示或隐藏div的解决方案。

Displaying elements on my page depending on the page width

现在，我想要一种更先进的技术，我们根据页面宽度显示或隐藏表格中的列。

以下是表格的示例：

<table>
    <tr>
        <td id="col1">aaa aaaa</td>
        <td id="col2">bbbb bbb</td>
        <td id="col3">ccccc</td>
        <td id="col4">ddd dddd ddd ddd</td>
    </tr>
</table>

让我们说：

仅当页面宽度大于 800px 时，我才会显示col1。
仅当页面宽度大于 830px 时，我才会显示col2。
仅当页面宽度大于 860px 时，我才会显示col3。
仅当页面宽度大于 900px 时，我才会显示col4。

它必须是动态的，所以如果用户调整窗口大小，则必须显示/隐藏内容。

你看到我想要达到的目标吗？ 有更好的方法吗？

感谢。

Answer 1

@media screen and (max-width: 800px) { 
    #coll1 {
        display:none;
    }
}

@media screen and (max-width: 830px) { 
    #coll2 {
        display:none;
    }
}

......等等，应该这样做。

修改请注意旧版浏览器中媒体查询的浏览器支持有限。

Answer 2

试试这种方式

首先计算窗口宽度并将其存储在像

这样的局部变量中

var width = $(window).width();

然后编写一个函数来切换列的显示与你的逻辑（显示什么和不显示什么），如下所示..

 function toggleEles()
 {
   $('#col1,#col2,#col3,#col4').hide();
   if( width >= 900  )
   {
         $('#col1,#col2,#col3,#col4').show();
   }
  // Write other conditions here..
 }

然后在document.ready和resize事件上调用此函数，如下所示

$(window).resize(function()
{
   toggleEles();
});

由于

Answer 3

获取屏幕宽度：

var screenWidth = window.screen.availWidth;
if(screenWidth < 1024)
{
    document.getElementById("col4").style.display = "none";
}

然后，每次调整屏幕大小并隐藏/显示时，您都必须捕捉事件。

不确定如何在JQuery中执行此操作，但我相信有一个事件。

根据页面宽度动态添加或删除表中的列

3 个答案: