Как я подкачиваю треугольные значки при выполнении расширяющихся/сворачивающих отделений с Javascript/CSS
У меня есть отделение, которое я хочу переключить между отображением или не, когда пользователь нажимает на часть текста. У меня есть функция JavaScript, которая переключает отделение на или прочь. Это хорошо работает. То, что я не знаю, как сделать, должно иметь треугольник, который указывает направо или вниз в зависимости от того, открыто ли отделение.
Мой HTML похож на это:
<a onclick="toggleDiv('myDiv');">Click here to expand or close div</a>
<div id="myDiv" style="display:none">
...
</div>
Как я добавляю один из тех треугольников и имею его, указывают правильный путь, идеально только с HTML, JavaScript и CSS? Треугольник появился бы слева от, "Щелкают здесь..." строка.
Спасибо.
3 ответа
У вас также может быть спрайт изображения , который представляет собой одно изображение с обеими стрелками, предотвращая необходимо получить два изображения. Используйте CSS, чтобы изменить положение фонового изображения, чтобы отображалось только одно изображение за раз. Например, вот одно состояние:
#triangle {
background-image: url(triangle.png);
background-repeat: no-repeat;
background-position: 0 0;
}
затем используйте javascript, чтобы добавить класс CSS или напрямую манипулировать с:
background-position: 15px 0;
или подобным, чтобы сдвинуть следующий треугольник на место.
Вашу функцию toggleDiv() было бы полезно увидеть здесь. В любом случае вам, вероятно, следует просто добавить класс к вашему div, возможно, "active" или "open".
Затем в CSS сделать что-то вроде:
div {
background: url("downarrow.png") top left no-repeat;
}
div.open {
background: url("uparrow.png") top left no-repeat;
}
update
Вы также можете рассмотреть возможность перемещения вашего JS из HTML полностью, вы можете наблюдать событие click на элементе из вашего JS, затем добавить класс или удалить его в зависимости от его состояния. Возможно, стоит подумать об использовании библиотеки типа jQuery.
Есть несколько вариантов. Сначала вам понадобятся два изображения, назовем их uptri.jpg и dacentri.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 вы можете заменить класс вверх на класс вниз. Я бы посоветовал использовать jQuery, поскольку он упрощает задачу.
$("#myClicker").toggle(
function(){$(this).removeClass('up');
$(this).addClass('down');
},
function(){$(this).removeClass('down');
$(this).addClass('up');
}
);
Где myClicker - идентификатор вашей ссылки.