12.04.2016, 05:17
|
Интересующийся
|
|
Регистрация: 03.04.2016
Сообщений: 10
|
|
Возврат в исходное состояние кнопки
Здравствуйте. Я сделала, чтобы при нажатии на кнопку, менялась картинка и цвет кнопки. Но как сделать, чтобы при повторном нажатии на неё, цвет и картинка возвращались в исходное состояние?
Часть кода html:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<button class="btn-price" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
Парикмахерские услуги
</button>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<br>Стрижка с сушкой......1000 — 1500 руб.
<br>Стрижка с укладкой....1400 — 2200 руб.
<br>Коррекция челки.......200 руб.
<br>Окрашивание...........1600 — 5000 руб.
<br>Окрашивание корней....2000 — 2100 руб.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<button class="btn-price" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Косметология
</button>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<br>Чистка кожи......2200 — 2800 руб.
<br>Маски для лица....400 — 800 руб.
<br>Массаж лица.......500 — 1500 руб.
</div>
</div>
</div>
Код js:
<script>
$('#accordion button').click(function(event) {
$('#accordion .button_fixed').removeClass('button_fixed');
$(this).addClass('button_fixed');
event.preventDefault()
})
</script>
|
|
12.04.2016, 09:58
|
|
Профессор
|
|
Регистрация: 12.03.2015
Сообщений: 173
|
|
solobutova@mail.ru,
toggleClass
|
|
12.04.2016, 15:14
|
Интересующийся
|
|
Регистрация: 03.04.2016
Сообщений: 10
|
|
Сообщение от Alexander Belov
|
solobutova@mail.ru,
toggleClass
|
Получилось, но при нажатии на любую кнопку меняется у всех кнопок и цвет фона, и картинка, как сделать, чтобы менялось всё именно при нажатии у одной кнопки?
Вот как я сделала, я в js ни капли не понимаю, поэтому прошу помочь
$(document).ready(function() {
$("#accordion").click(function() {
$("#accordion button").toggleClass("button_fixed");
});
});
|
|
12.04.2016, 15:36
|
|
Профессор
|
|
Регистрация: 12.03.2015
Сообщений: 173
|
|
solobutova@mail.ru,
$("#accordion").delegate( "button", "click", function() {
$( this ).toggleClass("button_fixed");
});
|
|
12.04.2016, 15:41
|
Интересующийся
|
|
Регистрация: 03.04.2016
Сообщений: 10
|
|
Сообщение от Alexander Belov
|
solobutova@mail.ru,
$("#accordion").delegate( "button", "click", function() {
$( this ).toggleClass("button_fixed");
});
|
Получилось, но...фон и картинка прежние возвращаются на место, когда нажимаешь на них, а если нажмешь на другую кнопку, то остаются измененными. как быть? Чтобы понятнее было, я предоставила скрин
|
|
12.04.2016, 15:48
|
|
Профессор
|
|
Регистрация: 12.03.2015
Сообщений: 173
|
|
solobutova@mail.ru,
Напишите пример в JS Bin. С живым примером всегда проще разбираться.
|
|
12.04.2016, 15:57
|
Интересующийся
|
|
Регистрация: 03.04.2016
Сообщений: 10
|
|
Alexander Belov,
https://jsbin.com/dokudowere/1/edit?html,css,js,output
не знаю, как здесь bootstrap добавлять. Первый раз с этим сталкиваюсь
Последний раз редактировалось solobutova@mail.ru, 12.04.2016 в 16:09.
|
|
12.04.2016, 21:48
|
|
Профессор
|
|
Регистрация: 12.03.2015
Сообщений: 173
|
|
solobutova@mail.ru,
У Вас много не нужных классов и логика не продумана до конца.
1. Если Вы объявляете класс collapsed, то логично полагать, что он применён к "свёрнутым" кнопкам.
А какой вид эти кнопки имеют по умолчанию при загрузке страницы? Свёрнутый. Значит, по умолчанию им должен быть присвоен класс collapsed.
2. Bootstrap новичкам не нужен, вредит только - моё мнение. Т.к. Вы, пользуясь им, не научитесь понимать многие аспекты вёрстки и CSS непосредственно. Перебирайте весь функционал вручную, тем более, на простых макетах, вроде Вашего.
3. Если я правильно понял задачу, стремились получить что-то в таком роде?
|
|
13.04.2016, 05:27
|
Интересующийся
|
|
Регистрация: 03.04.2016
Сообщений: 10
|
|
Нет, не то хотела получить. Спасибо, буду пробовать снова сама)
|
|
13.04.2016, 08:23
|
|
Профессор
|
|
Регистрация: 12.03.2015
Сообщений: 173
|
|
solobutova@mail.ru,
Давайте ещё раз. Вот у Вас есть меню.
Если оно активно (раскрыт блок с описанием услуг), значит "плюс" в кружке меняется на "минус". Если неактивно (по умолчанию), то там остаётся "плюс".
Если при каком-то активном меню мы кликаем на другую секцию, то предыдущие сворачиваются ("минус" у них меняется на исходный "плюс"). А у нового активного меню, соответственно, "плюс" меняется на "минус".
Как на рисунке. Верно?
Изображения:
|
1.JPG (36.4 Кб, 0 просмотров) |
|
|
|
|