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');
    });
});

如何用媒体查询替换div

2 个答案: