jquery - 如何用媒体查询替换 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;  
   }
}

示范

如果降低窗口的高度，#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');
    });
});