Question

任何人都可以帮助我，当我到达viewport 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 {
    ?
    }
    });

Answer 1

我建议您使用媒体查询。将其包含在CSS文件中。

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

    #somediv
    {
        display:none
    }
}

Answer 2

检查这个小提琴http://jsfiddle.net/zDg2J/5/ 它将隐藏/显示不带js的div

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

}

在到达视口后隐藏div并能够再次显示它们

2 个答案: