隐藏小视口中的字段，单击按钮再次显示

Hide field on small viewport, click button to show again

本文关键字：按钮 单击 显示 字段 视口 隐藏      更新时间：2023-09-26

编辑：

最新工作代码：http://jsfiddle.net/fourroses666/DDXrc/9/

我有一个网页，里面有几个文本字段。

当我到达视口<767

当我点击另一个需要再次显示的div时。

html看起来像这样：（blok1，blok2等。）

<div class="bull bull-blok1"><a class="show-blok1" href="javascript:void(0)">Show it</a></div>
<div class="blokken blok1">
  <div class="text"><p>Here some text</p></div>
</div>

等等。。

我想我可以使用下面这样的视口来隐藏。但是，当我点击：块：可见时，我该如何让它工作呢？

当到达视口>676时，所有这些都需要再次可见。

一些CSS：@仅媒体屏幕和（最大宽度：767px）｛.blokken｛display:none；｝｝一些JS：$（window）.resize（function）{if（$（window）.width（）<767）{隐藏。blokken当单击.show-blok1时，则：show.blok1}其他{全部显示。blokken}})；

也许有人能帮我解决js部分的问题？

如果窗口的宽度被重新调整为小于767，请使用代码隐藏该div，否则显示div。

当点击.bull-blok1（href="javascript:showMe（）"）时，也让jQuery打开该div

$(window).resize(function(){
   if($(window).width()<767){$(".blokken blok1").hide()}
   else{$(".blokken blok1").show()}
});

function showMe(){
   jQuery(".blokken blok1").show();
}
相关文章：