Смена background при нажатии
Есть скрипт небольшой, при нажатии на вопрос, выплывает ответ, я хочу что бы при нажатии на вопрос, менялся фон вопроса, я это реализовал, но при нажатии на этот же вопрос, фон обратно не убирается, подскажите где поправить?
<div class="row"> <div class="col-lg-12"> <div class="question"> <span>Как заказать анонимно?</span> <div class="bg-plus"> <div class="plus"></div> </div> </div> </div> </div> <div class="answer"> Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой сталкиваются пользователи, торгующие криптовалютами, заключалась в том, что у них было приложение для доступа ко всем из одного места. Основная проблема, с которой Основная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которойОсновная проблема, с которой </div>
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
window.addEventListener('load', function () {
allClass(0.4); // время transition
function allClass(transition) {
var question = [].slice.call(document.querySelectorAll('.question'),0)
answer = [].slice.call(document.querySelectorAll('.answer'),0)
arrayHeight = [];
var props = function props(el) {
return el.getBoundingClientRect();
};
[].concat(_toConsumableArray(question)).forEach(function (e, i) {
arrayHeight[i] = props(answer[i]).bottom - props(answer[i]).top + 10 + 'px';
answer[i].style.height = '0px';
setTimeout(function () {
return answer[i].style.transition = transition + 's';
}, 50);
e.addEventListener('click', function () {
[].concat(_toConsumableArray(answer)).forEach(function (e, i) {
answer[i].style.height = '0px';
question[i].style.backgroundColor = '#fff';
question[i].style.color = '#000';
});
props(answer[i]).height == 0 ? answer[i].style.height = arrayHeight[i] : '';
question[i].style.backgroundColor = '#9e39a1';
question[i].style.color = '#fff';
});
});
}
}, false);
|
JIeuTo,
лучше сделайте так!
question[i].classList.toggle('activ');
и для класса activ укажите color и background |
j0hnik,
сделал как вы сказали, ничего не происходит |
<style>
.activ{
color: white;
background-color: red;
}
</style>
<span>Как заказать анонимно?</span>
<script>
document.querySelector('span').onclick = function(){
this.classList.toggle('activ');
};
</script>
все остальное связанное со смей цвета уберите |
Вот так попробуйте скрипт исправить, будет откат к стилям прописанным по умолчанию:
function _toConsumableArray(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = Array(arr.length);
i < arr.length; i++) { arr2[i] = arr[i];
} return arr2;
}
else { return Array.from(arr); } }
window.addEventListener('load', function () {
allClass(0.4); // время transition
function allClass(transition) {
var question = [].slice.call(document.querySelectorAll('.question'), 0)
answer = [].slice.call(document.querySelectorAll('.answer'), 0)
arrayHeight = [];
var props = function props(el) {
return el.getBoundingClientRect();
};
[].concat(_toConsumableArray(question)).forEach(function (e, i) {
arrayHeight[i] = props(answer[i]).bottom - props(answer[i]).top + 10 + 'px';
answer[i].style.height = '0px';
setTimeout(function () {
return answer[i].style.transition = transition + 's';
}, 50);
e.addEventListener('click', function () {
[].concat(_toConsumableArray(answer)).forEach(function (e, i) {
answer[i].style.height = '0px';
question[i].style.backgroundColor = '#fff';
question[i].style.color = '#000';
});
if (props(answer[i]).height == 0) {
answer[i].style.height = arrayHeight[i];
question[i].style.backgroundColor = '#9e39a1';
question[i].style.color = '#fff';
}
else {
question[i].style.backgroundColor = '';
question[i].style.color = '';
};
});
});
}
}, false);
|
MC-XOBAHCK,
благодарю, любезнейший |
| Часовой пояс GMT +3, время: 19:47. |