在到達視口後隱藏div並能夠再次顯示它們

任何人都可以幫助我，當我到達視口時767我需要隱藏所有文本框，所有需要看到的都是子彈。當你點擊一個項目符號時，它需要顯示它。在到達視口後隱藏div並能夠再次顯示它們

我的小提琴： 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 { 
    ? 
    } 
    });

來源

2013-06-27 user123

我會建議您使用媒體查詢。將其包含在您的CSS文件中。

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

    #somediv 
    { 
     display:none 
    } 
}

來源

2013-06-27 07:36:10 aBhijit

我如何讓它再次出現？ – user123

顯示：您要顯示的div上的塊。但是你希望在點擊時發生。因此，請使用jQuery將顯示設置爲阻止。 – aBhijit

看起來像我知道js，但我不知道，也許你可以幫我出 – user123

入住這撥弄http://jsfiddle.net/zDg2J/5/ 它會隱藏/顯示div的不JS

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

}

來源

2013-06-27 07:50:07 Raza

嘿，是的，但它需要點擊後，再次顯示文本塊當<767 – user123

只是添加一點jQuery的顯示他們點擊這個:) – Raza

是的，我需要那部分。 :) – user123

在到達視口後隱藏div並能夠再次顯示它們

回答

相關問題