0

ビューポート 767 に到達したら、すべてのテキストフィールドを非表示にする必要があります。表示する必要があるのは箇条書きだけです。箇条書きをクリックすると、それを表示する必要があります。

私のフィドル: http://jsfiddle.net/fourroses666/zDg2J/4/

HTML 

<div class="bull bull-blok1"><a class="show-blok1" href="javascript:void(0)">Show</a></div>
<div class="bull bull-blok2"><a class="show-blok2" href="javascript:void(0)">Show</a></div>
<div class="bull bull-blok3"><a class="show-blok3" href="javascript:void(0)">Show</a></div>

<div class="blokken blok1">
  <div class="line"></div>
  <div class="text"><div class="padx">text hier</div></div>
</div>

<div class="blokken blok2">
  <div class="line"></div>
  <div class="text"><div class="padx">text hier 2</div></div>
</div>

<div class="blokken blok3">
  <div class="line"></div>
  <div class="text"><div class="padx">text hier 3</div></div>
</div>

</div>
</div>

CSS

.fles-k1{width:220px; margin:0 auto; position:relative;}
.blokken{position:absolute; z-index:2; width:180px; min-height:100px; background:url(/img/bg-fles-blok.jpg) center bottom #ccc;}
.bull, .bullmob{position:absolute; border-radius:24px; height:24px; width:24px; border:3px solid #fff; background-color:#c5ad7d; z-index:3;}
.bull a{display:block; height:24px; width:24px; text-indent:-999px; overflow:hidden;}

.blokken .line{position:absolute; background-color:#c5ad7d;}
.blokken .text{color:#000;}
.blokken .text .padx{padding:12px 12px 18px 12px;}

.bull-blok1{left:110px; top:76px;}
.blok1{left:256px; top:40px;}
.blok1 .line{margin:50px 0 0 -120px; height:2px; width:120px;}

.bull-blok2{left:35px; top:282px;}
.blok2{left:-205px; top:246px;}
.blok2 .line{margin:50px 0 0 180px; height:2px; width:65px;}

.bull-blok3{left:148px; top:316px;}
.blok3{left:295px; top:280px;}
.blok3 .line{margin:50px 0 0 -130px; height:2px; width:130px;}

.bull a{display:none;}
.hidden{display:block; visibility:hidden;}

@media only screen and (max-width: 767px){

.bull a{display:block;}
.fles-content {position: relative; padding-bottom:10px;}
.fles-wrapper{max-width:320px;}

.blok1{left:35px; top:125px; margin:0;}
.blok1 .line{margin:-20px 0 0 89px; height:20px; width:2px;}
.blok2{left:-35px; top:330px; margin:0;}
.blok2 .line{margin:-20px 0 0 83px; height:20px; width:2px;}
.blok3{left:70px; top:364px; margin:0;}
.blok3 .line{margin:-20px 0 0 92px; height:20px; width:2px;}

}

可能なJS？

    $('.show-blok1').click(function(){
        $('.blok1').toggleClass('hidden');
    });

またはこのようなものですか？

$(window).resize(function() {
if ($(window).width() < 767) {
    ?
    }
else {
    ?
    }
    });
4

2 に答える 2

0

このフィドルをチェックしてくださいhttp://jsfiddle.net/zDg2J/5/ jsなしでdivを非表示/表示します

@media all and (max-width : 768px)  {
.blokken { display:none}

}
于 2013-06-27T07:50:07.340 に答える
0

メディアクエリを使用することをお勧めします。これを CSS ファイルに含めます。

@media all
and (max-width : 768px) 
{

    #somediv
    {
        display:none
    }
}
于 2013-06-27T07:36:10.953 に答える