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

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 Matrix Rotation Calculatorへのリンク:

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

:)

于 2013-11-11T18:49:25.383 に答える