响应式设计的jQuery切换问题答案

【问题标题】：jQuery Toggle issue with responsive design响应式设计的jQuery切换问题
【发布时间】：2012-11-06 11:16:36
【问题描述】：

我有一个响应式设计，我将三列合并为一列（但在此列中仍然保持三个类别分开），并且我切换类别以显示和隐藏每个类别中的内容。

然而，我的问题是，一旦您重新调整浏览器窗口的大小以看到三列再次并排浮动，值 display:none;还在。

/************************************************************************************
smaller than 990
*************************************************************************************/
@media screen and (max-width: 990px) {

    .sn{
    display: block;
    margin: 25px;
    }   

}

/************************************************************************************
smaller than 720
*************************************************************************************/
@media screen and (max-width: 720px) {
    .sn {
    display:none;
    }
}

切换的jQuery代码：

// Start function when DOM has completely loaded
$(document).ready(function(){
    var $open = $();
    $('#wb .cat_responsive').on('click', function(e){
      e.preventDefault();
      $open.slideUp();
      $open = $(this).closest('.sn_cat').find('.sn');
      $open.not(':animated').slideToggle();
    });
    $('.cat_responsive').get().hideFocus = true;
});

【问题讨论】：

在实践中，用户很少会为了调整您的设计而调整浏览器窗口的大小（智能手机用户可能会从横向切换到纵向）。我们的想法是以最适合其当前浏览器窗口大小的任何格式进行布局。

标签： jquery css responsive-design

【解决方案1】：

不要显示：无，尝试使用：

visibility:hidden;
visibility:visible;

【讨论】：

【解决方案2】：

问题是当使用 .toggle() 时，jQuery 将“display: block”直接添加到 HTML 标签，而不是 css 文件中。

例子：

假设你的元素是：

<div id="mini-navLinks">

当你使用 jQuery .toggle() 时，它变成：

<div id="mini-navLinks" style="display: block">

或

<div id="mini-navLinks" style="display: none">

我确定您已经看到了问题；这些属性被粘在你的元素上。因此，即使您的 CSS 中仍然设置了 'display: none' 属性，当浏览器调整大小时，它也会从元素标签中给出的样式中读取。

我自己也遇到了这个问题，我写了一个快速的hack来使用几行jQuery来解决这个问题：

    $(window).resize(function() {   
        if($(window).width() > 769)
        {
             $('#mini-navLinks').hide();
        }
    });

根据您要切换的元素，您必须将它们硬编码到 jQuery 中，并指定它们应该隐藏的屏幕宽度。一旦用户的浏览器宽度大于 769 像素，jQuery 将使用上面的代码 .hide() 我的 #mini-navLinks 元素。 .hide() 方法即使已经隐藏也可以工作，因此无需任何额外检查。

我同意 Blazemonger 的观点，即用户很少会调整浏览器的大小来摆弄设计，但我认为不留下任何松散的结局仍然很好。此外，这是一个快速解决方案，如果其他人有更好的解决方案，我很想听听更多。

【讨论】：