jQuery切換問題與響應式設計

我有一個響應式設計，我將三列合併爲一個（但在本專欄中仍保留三個類別），並且我切換類別以顯示和隱藏每個類別中的內容。jQuery切換問題與響應式設計

但是，我的問題是，一旦你重新調整瀏覽器窗口的大小來查看三個列再次浮在一起，值顯示：無;仍然在那裏。

/************************************************************************************ 
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; 
});

來源

2012-10-23 Victor

實際上，用戶很少會調整瀏覽器窗口的大小，只是爲了擺弄設計（智能手機用戶從橫向切換到縱向）。這個想法是以最適合CURRENT瀏覽器窗口大小的格式進行佈局。 – Blazemonger

而是顯示：無，請嘗試使用：

visibility:hidden; 
visibility:visible;

來源

2012-10-23 14:18:10 Lowkase

這不是真正的問題，但謝謝你的嘗試。 – Victor

的問題是，使用.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幾行來解決該問題：

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

根據您所切換的元素，你將有用指定的屏幕寬度將它們硬編碼到jQuery中，它們應該隱藏起來。使用上面的代碼，一旦用戶的瀏覽器變得大於769像素寬，jQuery將會將.hide（）我的＃迷你navLinks元素。即使它已經隱藏，方法.hide（）也可以工作，所以不需要任何額外的檢查。

我同意Blazemonger的觀點，即用戶很少調整瀏覽器的大小來調整設計，但我認爲不留任何鬆散的結尾仍然很不錯。此外，這是一個快速解決方案，如果其他人有更好的解決方案，我會有興趣聽到更多。

來源

2012-11-06 03:16:36 mcriecken

jQuery切換問題與響應式設計

回答

相關問題