0

編集：

最新の作業コード: http://jsfiddle.net/fourroses666/DDXrc/9/

いくつかのテキストフィールドを持つ Web ページがあります。

ビューポート < 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: @media only screen and (max-width: 767px){.blokken{display:none;}} 一部の JS: $(window).resize(function() { if ($(window).width() < 767) { .blokken を非表示にする .show-blok1 をクリックすると、次のようになります: show .blok1 } else { すべての .blokken を表示 } });

多分誰かがそのjsの部分を手伝ってくれますか?

4

1 に答える 1

0

ウィンドウが 767 より狭い幅にサイズ変更された場合は、その div を非表示にするコードを用意し、それ以外の場合は div を表示します。

また、.bull bull-blok1 がクリックされたときにその div を jQuery で開きます (href="javascript:showMe()")

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


function showMe(){
   jQuery(".blokken blok1").show();
}
于 2013-07-10T16:36:14.857 に答える