如何创建在页面加载时显示消息的可折叠容器

Question

我想要将一些说明折叠到网页上。我希望默认情况下折叠说明，并且在单击时用户应该能够显示说明。除了在页面最初加载时不显示我的文本提示 Click for Instructions 之外，我几乎已经完成了这项工作。相反，我必须将鼠标悬停在说明上才能显示它们。

我不确定，但我认为这在亚马逊 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 - 我认为这很重要，因为我们最初尝试使用一种方法来做到这一点，要求我们提供 link 到

 <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

你只需要设置.panel-heading a标签的CSScolor属性。

现在，它与容器的 background-color 相同，因此它似乎不存在。当您悬停时，link 的颜色会稍微变深，因此它会在悬停时出现。我还添加了 .panel-heading a:hover 选择器规则，因此您可以了解如何在悬停文本时更改颜色。

查看下面的代码片段：

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

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

Answer 2

问题是您没有点击处理程序，所以您应该将 onmousedown 更改为 onclick 否则它只会在悬停时执行，这可以在 CSS 中使用:hover伪class.

如何创建在页面加载时显示消息的可折叠容器

How do I create a collapsible container that displays the message on page load

html

javascript

css

mechanicalturk