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

有人能帮我吗，当我到达viewport 767时，我需要隐藏所有文本字段，您需要看到的只是项目符号。当你点击一个项目符号时，它需要显示出来

<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>

我的小提琴：

<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>

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>

可能是JS

<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>

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

还是像这样

<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>

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

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<767）{
?
}
否则{
?
}
});

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

<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>

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

    #somediv
    {
        display:none
    }
}

检查这把小提琴 它将隐藏/显示没有js的div

<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>

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

}

---

显示：要显示的div上的块。但你希望这种事一次就发生。因此，使用jQuery将显示设置为block。看起来我知道js，但我不知道，也许您可以帮助我完成以下任务：$（'.show-blok1'）。单击（function（）{$（'.blok1'）。style（'display:block'）；}）？呵呵，是的，但点击子弹后需要再次显示文本块<767你能帮我解决吗？检查这个你必须让他们成为子弹的孩子这很容易，只需修改一些样式，因为他们现在是子弹师的孩子。谢谢，我会看一看。