0

在下拉菜单中将 ► 三角形切换为 ▲ 的最佳方法是什么（不使用图像）？

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

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

4 回答 4

3

您可以toggleClass在 CSS3 中使用和定义带有伪标记的三角形:before

CSS

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

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

jQuery

$(".box-heading > a").click(function(){
   $(this).toggleClass("active")
});
于 2013-11-11T18:46:11.687 回答
3

您可以使用 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 度，使左箭头变为向下箭头

浏览器兼容性

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

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

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

:)

于 2013-11-11T18:49:25.383 回答
1

使用三元表达式

$(".filter_group[filtertype!='p']").is(":visible") ? $(this).next("span").text("▲") : $(this).next("span").text("►")
于 2013-11-11T18:46:03.357 回答
0

使用 jQuery 替换跨度的 html

就像是 ：

$('span').text('▲');
于 2013-11-11T18:46:22.873 回答