jquery - divをメディアクエリに置き換える方法

Question

現在、レスポンシブWebサイトの検索ボックスを作成していますが、デザインが原因で、クリックで展開する検索ボックスが特定の領域に収まりません。そこで、検索ボックスが別のボタンに置​​き換えられ、別の場所に検索ボックスが表示されるようにしたいと思います。

divをメディアクエリまたはjqueryに置き換えるにはどうすればよいですか？

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

デモンストレーション

ウィンドウの高さを低くすると、#adivは非表示になります。しかし、ボタンをクリックするとそれが表示されます。メディアクエリを使用して、さまざまなディメンションの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');
    });
});