使用Javascript / CSS扩展/折叠div时如何交换三角形图标

Question

我有一个div，我想在用户单击一段文本时在显示还是不显示之间切换。 我有一个javascript功能，可以打开或关闭div。 很好 我不知道该怎么办，就是要有一个三角形，该三角形根据div是否打开而指向右边或右边。

我的HTML看起来像这样：

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a>
<div id="myDiv" style="display:none">
   ...
</div>

如何添加这些三角形之一，并使其正确指向，理想情况下仅使用HTML，Javascript和CSS？ 三角形将出现在“单击此处...”字符串的左侧。

谢谢。

Answer 1

您的toggleDiv()函数将有助于在此处查看。 无论如何，您可能应该只向div添加一个类，也许是“活动”或“开放”。

然后在您的CSS中，执行以下操作：

div {
  background: url("downarrow.png") top left no-repeat; 
}

div.open {
  background: url("uparrow.png") top left no-repeat; 
}

更新

您还可以考虑将JS完全移出HTML，可以观察JS中元素上的click事件，然后添加类或根据其状态将其删除。 也许考虑使用类似jQuery的库。

Answer 2

有很多选择。 首先，您将需要两个图像，让我们将它们称为uptri.jpg和downtri.jpg。 然后，您可以创建两个CSS类：

   .up{
       background-image:url(../images/uptri.jpg);
       background-repeat:no-repeat;
   }

   .down{
       background-image:url(../images/downtri.jpg);
       background-repeat:no-repeat;
   }

然后使用一些JavScript，您可以将up类换成down类。 我建议使用jQuery，因为它非常容易。

   $("#myClicker").toggle(
         function(){$(this).removeClass('up');
                     $(this).addClass('down');
         }, 
         function(){$(this).removeClass('down');
                     $(this).addClass('up');
         }     
    );

其中，myClicker是链接的ID。

Answer 3

, which is a single image that has both of the arrows, preventing the need for fetching two images. 您还可以使用一个图像 ，它是具有两个箭头的单个图像，从而无需获取两个图像。 使用CSS更改背景图片的位置，以便一次只显示一个。 例如，这是一种状态：

#triangle {
    background-image: url(triangle.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

然后使用javascript添加CSS类或直接操作以：

    background-position: 15px 0;

或类似的将下一个三角形移到适当位置。