Question

我有一个显示一些div的网页，当视口为＆lt;时，需要隐藏这些div。为680像素。这一切都已完成。

还需要做的是，“bullmob a href”需要再次显示div，而十字架需要关闭它。因此，使用“移动”（＆lt; 680px），您可以单击显示div。

仍然需要对＆lt; 680版...

我的小提琴就在这里： http://jsfiddle.net/fourroses666/6Be3A/5/

有人可以帮我解决js部分吗？

<div class="fles">

    <div class="blokken blok1">
      <div class="cross hidemob">x</div>
      <div class="line hidemob"></div>
      <div class="bull hidemob"></div>
      <div class="bullmob showmob"></div>
      <div class="text hidemob"><div class="padx">txt here</div></div>
    </div>

    <div class="blokken blok2">
      <div class="cross hidemob">x</div>
      <div class="line hidemob"></div>
      <div class="bull hidemob"></div>
        <div class="bullmob showmob"><a class="show-it" href="#">Show</a></div>
      <div class="text hidemob"><div class="padx">txt here 2</div></div>
    </div>

</div>


.fles .blokken{position:absolute; z-index:1; width:180px; min-height:100px; background:url(/bg-fles-blok.jpg) center bottom #ccc;}
.fles .blokken .cross{display:none; position:absolute; right:0; top:0; height:20px; width:20px; text-align:center; line-height:16px;}
.fles .blokken .bull, .fles .blokken .bullmob{position:absolute; border-radius:24px; height:24px; width:24px; border:3px solid #fff; background-color:#c5ad7d; z-index:1;}
.fles .blokken .bullmob{display:none; cursor:pointer; cursor:hand;}
.fles .blokken .bullmob a{display:block; height:24px; width:24px; overflow:hidden; text-indent:-999px;}
.fles .blokken .line{position:absolute; background-color:#c5ad7d;}
.fles .blokken .text{color:#000;}
.fles .blokken .text .padx{padding:12px 12px 18px 12px;}
.fles .showmob{display:none;}


.fles .blok1{top:40px; left:252px;}
.fles .blok1 .line{margin:50px 0 0 -130px; height:2px; width:130px;}
.fles .blok1 .bull, .fles .blok1 .bullmob{margin:36px 0 0 -142px;}

.fles .blok2{top:200px; left:240px;}
.fles .blok2 .line{margin:50px 0 0 180px; height:2px; width:130px;}
.fles .blok2 .bull, .fles .blok2 .bullmob{margin:36px 0 0 302px;}

@media screen and (max-width: 680px) {
    .fles .showmob{display:block!important;}
    .fles .hidemob{display:none;}
    .fles .blokken{background:none;}
}

我对js并不擅长，也许这可以起作用;

$(".bullmob").click(function(){
    $(".cross").show();
    $(".bull").hide();
    $(".text").show();
    $(".line").show();
})

小于680的视口然后隐藏，点击时显示它

0 个答案: