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

Question

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

0

Что было бы лучшим способом для переключения треугольника на ▲ в выпадающем меню (без использования изображений)?

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

user2980307 11 нояб. 2013, в 20:30

Источник

2

Да, мы можем сделать это для вас, и нет, у вас не будет плохой репутации в вашей учетной записи #newUser.
Milche Patern 11 нояб. 2013, в 18:49

Теги:

javascript

jquery

html

4 ответа

Ещё вопросы

Да, мы можем сделать это для вас, и нет, у вас не будет плохой репутации в вашей учетной записи #newUser.

Jonathan Marzullo · Answer 1 · 2013-11-11T16-31-00.000Z

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

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

:)

это забавная идея :), однако, вам нужно переключить класс сверху. И можно добавить анимацию (переход) - конечно, выглядело бы круто!
Просто отметим, что это css-level-3 и не полностью поддерживается для кросс-браузерного решения.
@MilchePatern Доходит до того, что вам не нужно беспокоиться о поддержке. Просто используйте CSS3 ..
@MilchePatern - это совместимость браузера - caniuse.com/#search=transforms
Ну, согласно «Caniuse.com», только IE10 +, IE-mobile и Firefox23 + поддерживают CSS3. Все остальные с префиксом проприетарного non-css3. Может быть, мы не должны перестать беспокоиться об этом слишком быстро?
Свойство CSS transform будет работать во всех последних современных браузерах без префикса ... вышеупомянутое будет работать во всех браузерах, даже дрянных ie8 .., которые существуют, пока Microsoft не прекратит поддержку XP в апреле 2014 года

Horen · Answer 2 · 2013-11-11T16-28-00.000Z

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

CSS

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

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

JQuery

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

Хаха, я просто делал скрипку для чего-то подобного. +1 :-D

tymeJV · Answer 3 · 2013-11-11T17-23-00.000Z

Использовать выражение Ternary

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

Milche Patern · Answer 4 · 2013-11-11T17-44-00.000Z

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

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

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