Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2016, 05:17
Интересующийся
Отправить личное сообщение для solobutova@mail.ru Посмотреть профиль Найти все сообщения от solobutova@mail.ru
 
Регистрация: 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>
Изображения:
Тип файла: jpg Снимок.JPG (36.4 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2016, 09:58
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

solobutova@mail.ru,
toggleClass
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2016, 15:14
Интересующийся
Отправить личное сообщение для solobutova@mail.ru Посмотреть профиль Найти все сообщения от solobutova@mail.ru
 
Регистрация: 03.04.2016
Сообщений: 10

Сообщение от Alexander Belov Посмотреть сообщение
solobutova@mail.ru,
toggleClass
Получилось, но при нажатии на любую кнопку меняется у всех кнопок и цвет фона, и картинка, как сделать, чтобы менялось всё именно при нажатии у одной кнопки?
Вот как я сделала, я в js ни капли не понимаю, поэтому прошу помочь
$(document).ready(function() {
            $("#accordion").click(function() {
                $("#accordion button").toggleClass("button_fixed");
            });
        });
Ответить с цитированием
  #4 (permalink)  
Старый 12.04.2016, 15:36
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

solobutova@mail.ru,
$("#accordion").delegate( "button", "click", function() {
  $( this ).toggleClass("button_fixed");
});
Ответить с цитированием
  #5 (permalink)  
Старый 12.04.2016, 15:41
Интересующийся
Отправить личное сообщение для solobutova@mail.ru Посмотреть профиль Найти все сообщения от solobutova@mail.ru
 
Регистрация: 03.04.2016
Сообщений: 10

Сообщение от Alexander Belov Посмотреть сообщение
solobutova@mail.ru,
$("#accordion").delegate( "button", "click", function() {
  $( this ).toggleClass("button_fixed");
});
Получилось, но...фон и картинка прежние возвращаются на место, когда нажимаешь на них, а если нажмешь на другую кнопку, то остаются измененными. как быть? Чтобы понятнее было, я предоставила скрин
Изображения:
Тип файла: jpg Снимок.JPG (32.6 Кб, 4 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 12.04.2016, 15:48
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

solobutova@mail.ru,
Напишите пример в JS Bin. С живым примером всегда проще разбираться.
Ответить с цитированием
  #7 (permalink)  
Старый 12.04.2016, 15:57
Интересующийся
Отправить личное сообщение для solobutova@mail.ru Посмотреть профиль Найти все сообщения от solobutova@mail.ru
 
Регистрация: 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.
Ответить с цитированием
  #8 (permalink)  
Старый 12.04.2016, 21:48
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

solobutova@mail.ru,
У Вас много не нужных классов и логика не продумана до конца.

1. Если Вы объявляете класс collapsed, то логично полагать, что он применён к "свёрнутым" кнопкам.
А какой вид эти кнопки имеют по умолчанию при загрузке страницы? Свёрнутый. Значит, по умолчанию им должен быть присвоен класс collapsed.

2. Bootstrap новичкам не нужен, вредит только - моё мнение. Т.к. Вы, пользуясь им, не научитесь понимать многие аспекты вёрстки и CSS непосредственно. Перебирайте весь функционал вручную, тем более, на простых макетах, вроде Вашего.

3. Если я правильно понял задачу, стремились получить что-то в таком роде?
Ответить с цитированием
  #9 (permalink)  
Старый 13.04.2016, 05:27
Интересующийся
Отправить личное сообщение для solobutova@mail.ru Посмотреть профиль Найти все сообщения от solobutova@mail.ru
 
Регистрация: 03.04.2016
Сообщений: 10

Нет, не то хотела получить. Спасибо, буду пробовать снова сама)
Ответить с цитированием
  #10 (permalink)  
Старый 13.04.2016, 08:23
Аватар для Alexander Belov
Профессор
Отправить личное сообщение для Alexander Belov Посмотреть профиль Найти все сообщения от Alexander Belov
 
Регистрация: 12.03.2015
Сообщений: 173

solobutova@mail.ru,
Давайте ещё раз. Вот у Вас есть меню.
Если оно активно (раскрыт блок с описанием услуг), значит "плюс" в кружке меняется на "минус". Если неактивно (по умолчанию), то там остаётся "плюс".

Если при каком-то активном меню мы кликаем на другую секцию, то предыдущие сворачиваются ("минус" у них меняется на исходный "плюс"). А у нового активного меню, соответственно, "плюс" меняется на "минус".

Как на рисунке. Верно?
Изображения:
Тип файла: jpg 1.JPG (36.4 Кб, 0 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Анимация залипания кнопки SmilingDog Events/DOM/Window 14 22.12.2014 06:35
При нажатии граница кнопки выделяется оранжевым alexan0308 Мобильный JavaScript 3 12.09.2013 19:37
Программное нажатие кнопки Kuklachel Events/DOM/Window 8 24.07.2013 22:54
Обновление события кнопки TheHappy Общие вопросы Javascript 0 06.03.2012 10:30
Получение ссылки на объект в обработчике нажатия кнопки pauluss ExtJS 1 22.06.2011 15:27