Переключить треугольник ► ▲ на выпадающем меню jQuery

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

Используйте трехкомпонентной выражение

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

Answer 2

Вы можете использовать toggleClass и определить треугольник в CSS3 с псевдо теге :before

CSS

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

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

JQuery

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

Answer 3

Использование JQuery для замены HTML вашего диапазона

Что-то вроде:

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

Answer 4

вы можете использовать CSS .. поэтому, когда вы нажмете на тег, вы добавляете класс в теге a. Скажем, класс под названием щелкнул, а затем у него есть правило 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

:)