Question

我有一些基于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

如果向下滚动到标题（例如“区别特征”或“分类”），您将看到我的意思。

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

Answer 1

尝试将以下范围添加到您的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>

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

只需将glyphicon-chevron-up替换为您想要的那个。

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

1 个答案: