jQuery顯示基於CSS元素和slideToggle（）狀態屬性的隱藏DIV

我需要一些支持來完成一個jQuery函數，我正在努力了很長一段時間。jQuery顯示基於CSS元素和slideToggle（）狀態屬性的隱藏DIV

我有一個div中的HTML內容與類mnu2 mob_hide。如果頁面寬度大於500像素，則該內容應始終可見，如果寬度小於500像素，則應隱藏該內容。我正在用CSS媒體查詢做到這一點，它工作得很好。

我也有一個slideToggle（）函數應該根據用戶需求顯示/隱藏頁面寬度小於500px的HTML內容。

問題是，對於頁面寬度小於500px，如果內容顯示，然後通過slideToggle（）再次隱藏並且用戶調整大於500px的寬度的屏幕大小，HTML內容不再顯示。

我假設slideToggle（）函數中的CSS規則覆蓋了CSS媒體規則，並且內容保持隱藏狀態。我需要解決這個問題。

當前的代碼在這裏提供： JSFIDDLE

現在，我所想到的第一解決方案：可以加入另外的jquery函數來檢查屏幕寬度和用於頁面寬度小於500像素放大顯示HTML內容。此代碼的問題在於，即使頁面寬度小於500像素，該功能觸發內容仍然可見。代碼如下，我還沒有在增加的jsfiddle故意：

var filtermshow = jQuery.noConflict(); 

filtermshow(window).on('resize', function(){ 

    var win = filtermshow(this); //this = window 
    if (win.width() >= 500) { 
     filtermshow('.mob_hide').css({ 
     display: 'block', 
     }); 
    }    
});

有沒有一種方法，使再次隱藏的寬度小於500px的HTML內容，無論是通過jQuery或CSS，並在同一時間保持slideToggle（）的功能？任何eedback將不勝感激！

來源

2015-05-22 user3132858

我覺得對於這種情況，你可以找到在不使用JavaScript的一個解決方案：

使用隱藏複選框肘節式元件，然後將這些樣式規則：

對於移動設備顯示/隱藏基於複選框狀態的內容。
對於桌面大小，始終顯示內容。

這個例子是基於你的代碼：

<div> 
    <input type="checkbox" id="menu2" /> 
    <label class="tri2" for="menu2"></label> 
    <div class="content"> 
    ... 
    </div> 
</div> 

<style> 
#menu2 { display:none; } /* always hide the checkbox */ 
.content { overflow: hidden; } 
.tri2 { 
    background: #000; 
    display: inline-block; 
    height: 51px; 
    width: 50px; 
} 

/* The mobile version */ 
#menu2 ~ .content { height: 0; } /* hidden when unchecked */ 
#menu2:checked ~ .content { height: auto; } /* displayed when checked */ 


/* The desktop version */ 
@media only screen and (min-width:501px) { 
    .tri2 { display:none; } /* hide the mobile toggle button */ 
    #menu2 ~ .content{ display: block; height: auto; } /* always display content */ 
} 
</style>

這裏是工作的jsfiddle代碼來測試它：http://jsfiddle.net/kbm3t2s4/2/

來源

2015-05-22 14:27:24 Philipp

這實際上是接近天才的解決方案！謝謝菲利普，爲了節省時間來開發這樣漂亮的代碼。僅供參考：由於應用於內容菜單的其他樣式，我必須用'display：block;'和'display：none;'替換height：auto;'和'height：0;'，這導致它成爲在'height：0;'處可見;'再次感謝！ – user3132858

jQuery顯示基於CSS元素和slideToggle（）狀態屬性的隱藏DIV

回答

相關問題