如何创建可折叠容器，在页面加载

Question

我希望某些说明可以在网页上折叠。我希望默认情况下折叠指令，当点击时，用户应该能够显示指令。除了在页面最初加载时我的文本提示点击指示时，我几乎完成了这项工作。相反，我必须将鼠标悬停在指令上才能显示它们。

我不确定，但我觉得这在亚马逊Mturk上很重要 -

<!-- Bootstrap v3.0.3 -->
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" />
<section class="container" id="TranscriptionFromAnImage" style="margin-bottom:15px; padding: 10px 10px; font-family: Verdana, Geneva, sans-serif; color:#333333; font-size:0.9em;">
<div class="row col-xs-12 col-md-12"><!-- Instructions -->
<div class="panel panel-primary">
<div class="panel-heading"><a href="javascript:;" onmousedown="if(document.getElementById('collapse1').style.display == 'none'){ document.getElementById('collapse1').style.display = 'block'; }else{ document.getElementById('collapse1').style.display = 'none'; }"><strong>Click for Instructions</strong></a></div>
</div>
</div>
<div id="collapse1" style="display:none">
<p>here are some instructions</p>
</div>
</section>
<!-- End Instructions -->

要清楚，当页面首次加载时 - 我看到以下

当我鼠标悬停在页面上时，我会看到我想在加载时显示的文字

我之前提到我正在使用MTurk - 我认为这很重要，因为我们最初尝试使用需要提供链接的方法来实现这一点

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

但是这并没有给我们MTurk的任何可折叠功能（在MTurk之外工作得很好）我相信但无法确认AWS不允许从Mturk内部访问这些资源。

Answer 1

您只需设置color标记的CSS .panel-heading a属性即可。

现在，它与容器的background-color相同，所以它似乎并不存在。当您悬停时，链接会将颜色更改为稍暗，因此会在悬停时显示。我还添加了.panel-heading a:hover选择器规则，因此您可以看到在悬停文本时如何更改颜色。

请参阅下面的代码段：

＆＃13;

＆＃13;

.panel-heading a {
  color: #fff;  
}
.panel-heading a:hover {
  color: green;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- Bootstrap v3.0.3 -->
<link href="https://s3.amazonaws.com/mturk-public/bs30/css/bootstrap.min.css" rel="stylesheet" />
<section class="container" id="TranscriptionFromAnImage" style="margin-bottom:15px; padding: 10px 10px; font-family: Verdana, Geneva, sans-serif; color:#333333; font-size:0.9em;">
<div class="row col-xs-12 col-md-12"><!-- Instructions -->
<div class="panel panel-primary">
<div class="panel-heading"><a href="javascript:;" onmousedown="if(document.getElementById('collapse1').style.display == 'none'){ document.getElementById('collapse1').style.display = 'block'; }else{ document.getElementById('collapse1').style.display = 'none'; }"><strong>Click for Instructions</strong></a></div>
</div>
</div>
<div id="collapse1" style="display:none">
<p>here are some instructions</p>
</div>
</section>
<!-- End Instructions -->

＆＃13;

＆＃13;

＆＃13;

Answer 2

问题是您没有点击处理程序，因此您应该将onmousedown更改为onclick，否则只会在将鼠标悬停时执行，这可以使用:hover在CSS中完成伪类。