Javascript 切换三角形► ▲ 关于下拉jQuery

切换的最佳方式是什么► 三角形到▲ 在下拉菜单上不使用图像

<div class="box-heading">
    <a href="javascript:void(0);" id="switch-filters">
          <span>►</span> Možnosti filtrovania</a>
</div>

    $( "#switch-filters" ).click(function() {
    $(".filter_group[filtertype!='p']").toggle();
    });

---

使用三元表达式

$(".filter_group[filtertype!='p']").is(":visible") ? $(this).next("span").text("▲") : $(this).next("span").text("►")

您可以在CSS3中使用伪标记before来定义三角形

CSS

jQuery

---

使用jQuery替换span的html

比如：

$('span').text('▲');

---

你可以使用CSS。。因此，当您单击a标记时，您将向a标记添加一个类。。假设一个名为clicked的类，然后将CSS规则与该类关联

a.clicked span {
        transform: scale(1) rotate(90deg) translate3d(0,0,0);
        /* transform for IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
        zoom:1;
}

然后CSS将跨度旋转90度，使左箭头变成向下箭头

浏览器兼容性

还可以链接到CSS矩阵旋转计算器：

---

：

1+我喜欢这个建议。哈哈，我只是在为这样的事情胡闹+1:-染料，我们可以为你做，不，你不会在你的新用户帐户上有坏名声。这是一个有趣的想法：你需要在上面切换类。还可以添加一些动画过渡-看起来一定很酷！只需提及，这是css-level-3，对于“跨浏览器”解决方案来说并不完全受支持。@Milchepatren它已经到了你不必担心支持的地步。只需使用CSS3..@milchepaten这里是浏览器兼容性-根据“Caniuse.com”，只有IE10+、IE mobile和Firefox23+支持CSS3。所有其他的都是前缀为专有的非css3。也许我们不应该停止太快的担心？

$('span').text('▲');

a.clicked span {
        transform: scale(1) rotate(90deg) translate3d(0,0,0);
        /* transform for IE8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=-1.00000000, M21=1.00000000, M22=0.00000000,sizingMethod='auto expand')";
        zoom:1;
}