1

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

然而，我的问题是，一旦您重新调整浏览器窗口的大小以看到三列再次并排浮动，值 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;
});
4

2 回答 2

0

而不是显示：无，尝试使用：

visibility:hidden;
visibility:visible;
于 2012-10-23T14:18:10.747 回答
0

问题是当使用 .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' 属性，当浏览器调整大小时，它也会从元素标签中给出的样式中读取。

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

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

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

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

于 2012-11-06T03:16:36.757 回答