我需要h2元素以小屏幕尺寸关闭

Question

我正在重新设计我的网站，添加了Bootstrap和jQuery。我的文章的每一部分都以如下代码开头：

<section id="introduction"><h2 class="h2Article" id="a1" data-    toggle="collapse" data-toggle="collapse" data-target="#b1"><span class="Article"><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Introduction</span></span></h2>
  <div class="divArticle collapse in article collapse in article" id="b1">

当我预览页面时，我可以单击标题（h2）使其关闭。再次单击它会再次打开它。

它工作得很完美，但我想修改它，以便当有人在移动设备中查看页面时，默认情况下一切都是CLOSED。然后，用户将选择特定的h2标题并单击它以阅读该部分。

有谁知道我该怎么做？

最简单的方法是大概创造某种风格，如：

@media all and (max-width: 450px) {    
.h2Article { close; } 
}

但我不知道要替换什么CSS命令＆＃34;关闭＆＃34;用。当然，我需要一种样式，允许访问者通过单击标题来关闭和打开它。

如果不能这样做，你能提出另一种策略吗？我打算用维基百科作为一个例子，因为它的移动页面曾经像这样设置，但我发现他们改变了它。

Answer 1

您可以尝试使用CSS属性显示/可见性。将显示更改为无显示或隐藏可见性。

.h2Article { 
   diplay: none;
}

or
.h2Article { 
   visibility: hidden;
}

单击它时，使用Jquery / Javascript将属性从none更改为阻止或隐藏为可见。有关属性的比较，请参阅this reference

我希望这有帮助。三江源

这是维基百科网站的截图。每次单击都会触发该类以将CSS属性显示从none更改为阻止。

Answer 2

代码段：

function f(elem) {
  if ($(elem).parent().find(".divArticle").is(":visible"))
    $(elem).parent().find(".divArticle").css("display", "none");
  else
    $(elem).parent().find(".divArticle").css("display", "block");
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div>
  <h2 onclick="f(this)">hello</h2>
  <div class="divArticle">I'm an article</div>
</div>

对于CSS，这将在小屏幕上隐藏你的div：

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

使用Jquery调用类似的东西：

$(element).is(":visible");

并使用它在您显示/隐藏

之间切换