将向上或向下箭头添加到切换以显示文本的标题

Add up or down arrows to headers that are toggled to display text

本文关键字：显示 标题 文本 添加      更新时间：2023-09-26

我有一些基于 JQuery 和 Bootstrap 的脚本，允许我通过单击前面的标题来控制文本块显示或不显示。

下面是存储在我的数据库中的标题和文本块的示例：

<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">Where am I?</h2>
<section class="ConSec Where">
  <p>If you&#8217;ve ever worked in the Alaskan wilderness or explored Africa, you know how easy it is to get lost. (I&#8217;ve been temporarily lost three or four times &#8211; in fog, dense forests and in a blizzard on the Arctic Ocean.)</p>
</section>

我的JavaScript技能相当弱，所以我还不明白它是如何工作的。我的页面上有一些类似的功能，由此脚本控制：

<script>
 $("#intro").click(function(e) {
    e.preventDefault();
    $("#intro,.ConSec").toggleClass("texted");
 });
</script>

但是，即使我删除了上面的脚本，我也可以打开和关闭文本块，所以也许它是由 CSS 控制的。

我想修改我的代码，以便标题显示向上或向下箭头，类似于维基百科的移动页面;例如 http://en.m.wikipedia.org/wiki/Mammal

如果你向下滚动到一个标题(例如"区分特征"或"分类"(，你就会明白我的意思。

我不确定这些箭头是图像还是某种字体字符。我想知道是否有人可以告诉我如何制作类似的东西。我可能会想出一些使用图像的方法，但它会非常业余。

尝试将以下跨度添加到 h2 中：

<span class="glyphicon glyphicon-chevron-up"></span>

所以它看起来像...

<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">
    <span class="glyphicon glyphicon-chevron-up"></span>
    Where am I?
</h2>

您可以在此处找到不同引导程序图标的代码：http://getbootstrap.com/components/

只需将glyphicon-chevron-up替换为您想要的即可。

相关文章：