Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/4: Рейтинг темы: голосов - 4, средняя оценка - 4.75
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
1

Выскальзывающая панель

07.07.2013, 18:08. Просмотров 688. Ответов 6
Метки нет (Все метки)

Приветствую всех
HTML5
1
2
3
4
<button type="button" class="main_buttons">Персональные данные</button>
    <div class='panel'>Привет</div>
<button type="button" class="main_buttons">Персональные данные</button>
    <div class='panel'>Пока</div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(function() {
            $('button').on('click', function() {
            
            //Прячет открытый попап
            $('button[data-visible=yes]').next().hide();  
            
            //Показывает текущий если он ещё не открыт
            if(!$(this).data('visible')) {
                $(this).next().show(800); 
            } 
            //Если панель была открыта - убираем модификатор
            else {
                $(this).removeAttr('data-visible');
            }
            //Ставит модификатор - что попап открыт
            $(this).data('visible', 'yes');
            });
        });
js находится в head.
Панель раскрывается, но не скрывается, в чем проблема?
Заранее благодарен за помощь!
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
07.07.2013, 18:08
Ответы с готовыми решениями:

Выскальзывающая панель
Всем привет! Начал изучать js. Вот возник вопрос. Можно ли ниже указанный код преобразовать так,...

Выдвижная панель
Помогите новичку в javascripte!!! Создала хтмл страницу. Теперь надо сделать джава скрипт именно...

Статическая панель
Всем привет. Столкнулся с такой проблемой (уже сутки кручу ее): есть читалка, которая перелистывает...

Меню-панель
Всем привет уважаемые форумчане. Пожалуйста,может кто встречал,как реализовать выпадающую панель...

Tab панель
Приветствую всех! Есть Tab панель, есть к ней код(даже 2). первый работает нормально, а второй...

6
Makc71
50 / 48 / 10
Регистрация: 28.09.2012
Сообщений: 97
07.07.2013, 19:20 2
Здравствуйте.
Javascript
1
2
3
4
5
        $(document).ready(function () {
            $('button').on('click', function (e) {
                $(e.target).next().toggle();
            });
        });
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
07.07.2013, 23:04  [ТС] 3
Огромное спасибо!
Извиняюсь за свою наглость, но не могли бы вы комментарии к выше написанному коды написать, чтобы хотя бы в общих чертах разобраться?
0
Makc71
50 / 48 / 10
Регистрация: 28.09.2012
Сообщений: 97
07.07.2013, 23:21 4
Javascript
1
2
3
4
5
        $(document).ready(function () { // Когда дерево документа будет построено выполнить функцию
            $('button').on('click', function (e) { // выбрать кнопки и привязать к событию click функцию, e - аргументсобытия click, передаваемый нашей функции по умолчанию
                $(e.target).next().toggle(); // для кнопки, инициировавшей событие click выбрать следующий сестринский элемент в DOM и переключить его видимость
            });
        });
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
08.07.2013, 12:35  [ТС] 5
Премного благодарен!

Добавлено через 12 часов 24 минуты
Допустим у нас открыта 1 панель, нажимаем на 2, 1 панель закрывается, 2 открывается. Как это можно реализовать?
0
Makc71
50 / 48 / 10
Регистрация: 28.09.2012
Сообщений: 97
08.07.2013, 12:43 6
Javascript
1
2
3
4
5
6
        $(document).ready(function () {
            $('button').on('click', function (e) {
                $('.panel').hide();
                $(e.target).next().show();
            });
        });
1
Divil
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
05.09.2013, 17:59  [ТС] 7
Еще раз здравствуйте!)
Возник такой вопрос: в классе panel находится кнопка сохранить и обязательные текстовые поля.
Используя выше указанный код и не заполняя допустим некоторые обязательные поля, нажимаем на кнопку сохранить, в результате чего все сворачивается.
Можно ли как-то этого избежать?

Не по теме:

на одну и ту же кнопку, инпут можно поставить 2 одинаковых события(в данном случае onchange)?


Заранее благодарен за помощь!
0
05.09.2013, 17:59
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
05.09.2013, 17:59

языковая панель
есть картинка , там все указано (выбирается количество допустимых языков) , вопрос с его начать,...

Панель BB кодов
Создаю панель BB кодов, как сделать следущее: Как мне определить где находиться курсор и...

Выдвижная панель
Доброго времени суток! :) Как истинный новичек в JS сижу и уже долго ломаю голову над самой...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru