Как поменять местами значки треугольников при развертывании / свертывании div с помощью Javascript / CSS

Question

У меня есть div, который я хочу переключать между отображением или нет, когда пользователь нажимает на фрагмент текста.У меня есть функция JavaScript, которая включает или выключает div.Это отлично работает.Чего я не знаю, так это сделать треугольник, который указывает вправо или вниз в зависимости от того, открыт ли div.

Мой HTML выглядит следующим образом:

<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a>
<div id="myDiv" style="display:none">
   ...
</div>

Как добавить один из этих треугольников и правильно указать его, в идеале только с помощью HTML, Javascript и CSS?Треугольник появится слева от строки «Нажмите здесь ...».

Спасибо.

Answer 1

Ваша функция toggleDiv() будет полезна для просмотра здесь. В любом случае вам, вероятно, следует просто добавить класс к вашему div, возможно, «активный» или «открытый».

Затем в вашем CSS сделайте что-то вроде:

div {
  background: url("downarrow.png") top left no-repeat; 
}

div.open {
  background: url("uparrow.png") top left no-repeat; 
}

обновление

Вы также можете рассмотреть возможность полного удаления своего JS из своего HTML, вы можете наблюдать событие click на элементе из своего JS, затем добавить класс или удалить его в зависимости от его состояния. Возможно, стоит подумать об использовании библиотеки, такой как jQuery.

Answer 2

Есть несколько вариантов. Сначала вам понадобятся два изображения, назовем их uptri.jpg и downtri.jpg. Затем вы можете создать два CSS-класса:

   .up{
       background-image:url(../images/uptri.jpg);
       background-repeat:no-repeat;
   }

   .down{
       background-image:url(../images/downtri.jpg);
       background-repeat:no-repeat;
   }

Затем с помощью JavScript вы можете поменять класс up на класс down. Я бы посоветовал использовать jQuery, поскольку это упрощает задачу.

   $("#myClicker").toggle(
         function(){$(this).removeClass('up');
                     $(this).addClass('down');
         }, 
         function(){$(this).removeClass('down');
                     $(this).addClass('up');
         }     
    );

Где myClicker - это идентификатор вашей ссылки.

Answer 3

Вы также можете иметь изображение sprite , которое представляет собой одно изображение с обеими стрелками, что исключает необходимость извлечения двух изображений. Используйте CSS, чтобы изменить положение фонового изображения, чтобы отображалось только одно изображение за раз. Например, вот одно состояние:

#triangle {
    background-image: url(triangle.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

затем используйте javascript для добавления класса CSS или напрямую манипулируйте:

    background-position: 15px 0;

или подобное, чтобы сдвинуть следующий треугольник на место.