Question

在下拉列表中切换►三角形到▲的最佳方法是什么？（不使用图像）？

<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();
    });

Answer 1

您可以使用toggleClass并使用伪标记:before

在CSS3中定义三角形

<强> CSS

.box-heading > a:before{
   content: "▲";
}

.box-heading > a.active:before{
   content: "►";
}

<强>的jQuery

$(".box-heading > a").click(function(){
   $(this).toggleClass("active")
});

Answer 2

你可以使用CSS ..所以当你点击一个标签时，你会在一个标签上添加一个类......比如一个名为点击的类，然后有一个与该类关联的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度，使左箭头变为向下箭头

浏览器兼容性

http://caniuse.com/#search=transforms

还链接到 CSS矩阵循环计算器：

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

：）

Answer 3

使用三元表达式

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

Answer 4

使用jQuery替换跨度的html

类似的东西：

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

在下拉列表jQuery上切换三角形►▲

4 个答案: