我正在制作一个Story Map(ArcGIS / Esri产品,它使您可以制作各种类型的地理参考演示文稿),使您可以使用嵌入式HTML和CSS(在<style>
标记内)。我遇到的问题是我想显示/隐藏有关不同主题的其他信息,但是我无法成功实现此功能。
我尝试了崩溃Bootstrap方法,该方法最初可以使用,但几个小时后它不再起作用(使用button方法,该按钮停止工作,使用href方法,它仅在新页面中再次打开Story Map)。这是该代码:
<p>
<button aria-controls="collapseFlowers" aria-expanded="false"
class="btn btn-primary" data-target="#collapseFlowers"
data-toggle="collapse"
type="button">
More information on Wildflower
</button>
</p>
<div class="collapse">
<div class="card card-body">
<img alt="" src="https://i.imgur.com/Bidb7cR.png" />
</div>
</div>
根据我的收集,这个问题是因为Story Map缺少Bootstrap依赖关系,但是我不知道为什么在这种情况下它最初会起作用。
我还尝试了所有解决方案here,但都没有成功。当我保存并退出HTML编辑器时,似乎可以“编译”代码,删除其运行所需的部分。这可能是一个不足的解释,但如果需要,我可以提供一些示例。
Story Maps确实支持JavaScript和其他更深层次的HTML,但是您必须下载源代码并重新托管它,这不是该项目的选项。我对Java,C和其他一些语言有丰富的经验,但是对HTML及其实现方式知之甚少,这使我发疯。任何帮助表示赞赏!
听按钮上的点击事件,
仅使用JavaScript,
const btn = document.querySelector('.btn');
const collapse = document.querySelector('.collapse');
// initially hide the image
collapse.style.display = "none";
var hidden = true;
// click event listener
btn.addEventListener('click', handleClick);
// click event handler
function handleClick (e) {
if (hidden) {
hidden = false;
collapse.style.display = "block";
}
else {
hidden = true;
collapse.style.display = "none";
}
}
<p><button aria-controls="collapseFlowers" aria-expanded="false" class="btn btn-primary" data-target="#collapseFlowers" data-toggle="collapse" type="button">More information on Wildflowers</button></p>
<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>
仅使用CSS,
label {
cursor: pointer;
}
div.collapse {
display: none;
}
#btn-checkbox {
width: 0;
height: 0;
opacity: 0;
}
#btn-checkbox:checked + div.collapse {
display: block;
}
<button><label for="btn-checkbox">More information on Wildflower</label></button>
<input id="btn-checkbox" type="checkbox"/>
<div class="collapse">
<div class="card card-body"><img alt="" src="https://i.imgur.com/Bidb7cR.png" /></div>
</div>
我对上面的代码做了一些更改,以便可以舒适地工作。与该帖子相关的链接,CSS-tricks