如何用媒體查詢替換div

Question

我目前正在爲我的響應式網站 設計搜索框，但由於設計原因，點擊展開式搜索框不適合特定區域。 因此，我想讓這個搜索框被替換爲另一個按鈕 ，然後這個按鈕會在不同的地方顯示一個搜索框。

如何用媒體查詢或jquery替換div？

Answer 1

這裏是你如何能做到這一點：

HTML和JavaScript：

<div id=a>a</div> 
    <button id=b>BUT</button> 
    <script> 
    $('#b').click(function(){$('#a').show()}) 
    </script> 

CSS：

@media (max-height: 500px) { 
    #a { 
    display: none; 
    } 
} 
@media (min-height: 500px) { 
    #b { 
    display: none; 
    } 
} 

Demonstration

如果您減小窗口的高度，則隱藏#a div。但點擊按鈕顯示它。使用媒體查詢，您還可以調整不同維度的div的位置或外觀。

Answer 2

HTML

<div id="Box"> 
    <input type="submit" value="submit" id="submit" class="show" /> 
    <input type="text" id="text" class="hide" /> 
</div> 

CSS

.show 
{ 
    display:block; 
} 
.hide 
{ 
    display:none; 
} 

jQuery的

$(document).ready(function(){ 
    $("#Box").dblclick(function(){ 
     $('#text').toggleClass('show'); 
     $('#submit').toggleClass('.hide'); 
    }); 
});