18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519

ToggleCLASS - прятать один div при клике в область другого

20.04.2015, 20:02. Показов 2194. Ответов 11
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Как сделать так, чтоб если тыкаю в место определённого дива (назовём его главным) убирался другой див (назовём его панелью). Просто проблема в том, что кнопка по которой показывается панель (использую toggleCLASS) находится в главном диве. И получается, что тыкая на кнопку я тыкаю и в главный див. Я незнаю как. Додумался только жо этого
JavaScript
1
2
3
4
5
6
7
8
$(function () {
    var $info_panel = $('.info_panel');
    var $el2 = $('.el2');
        $('#show_info_panel').click(function(e) {
            $info_panel.toggleClass('slide_panel');     
            $el2.toggleClass('slide_content');
     });
 })
Ну и получается что сначала я кликаю по кнопке (которая перключает toggle), но и одновременно я тыкаю и в главный див. И toggle возвращается в начальное значение.
Вот мой работающий код (чисто кнопка):
JavaScript
1
2
3
4
5
6
$(function () {
     var $info_panel = $('.info_panel');
     $('#show_info_panel').click(function(e) {
         $info_panel.toggleClass('slide_panel');
     });
 })
Info_panel - (Скрываемый див, панель)
show_info_panel - (Кнопка, которая вызывает toggle, которая скрывает/показывает панель)
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
20.04.2015, 20:02
Ответы с готовыми решениями:

Срабатывают две функции при клике (один div сверху другого)
var qwer = 0 $(click_pod_menu).click(function(e){ qwer = (qwer ==0) ? 1 : 0; if (qwer == 1) { var e =...

При клике на DIV меняется картинка другого DIV
Подскажите как это реализовать? Добавлено через 21 минуту Можно-ли решить этот вопрос при помощи лишь HTML и CSS? Или нужно...

Прятать Label при клике на TextBox
На форме имеется TextBox, Label и много других элементов. Надо, что бы при нажатии на TexBox, Label исчезал, а при нажатии на другое...

11
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
20.04.2015, 20:21
JavaScript
1
2
3
4
$('#show_info_panel').click(function(e) {
    e.stopPropagation();
    $info_panel.toggleClass('slide_panel');
});
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
20.04.2015, 20:30  [ТС]
Не работает

Добавлено через 1 минуту
Пробовал ещё через focusout - тоже никак
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
20.04.2015, 20:52
Html код скиньте нагляднее будет.
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
23.04.2015, 19:31  [ТС]
Извиняюсь что так долго писал. Система слетела. Сейчас уже всё переустановил.
Вот код: (Хотя не особо понимаю зачем он нужен. Я вроде написал где, что, за что ответчает)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
   <link href='http://fonts.googleapis.com/css?family=PT+Serif+Caption&subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <script src="jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript" src="jquery.nicescroll.min.js"></script>
</head>
<body link="black" vlink="black" alink="black">
    <div id="content">
     <div id = "Page_1">
          <div class="el1">
            <a href="#" id="show_info_panel">
        <span class="i_text">i</span>
            </a>
       </div>
       <div class="el2">
       <p class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas necessitatibus quos vero, explicabo. Perferendis aperiam nostrum corporis, mollitia illo minus placeat quidem sapiente maxime cupiditate explicabo provident, veritatis facilis at! Deserunt odio commodi temporibus debitis, eligendi. Quisquam qui enim pariatur nulla voluptatibus, provident in libero ipsum temporibus, fugiat odit quidem. Dignissimos est corporis explicabo deserunt quasi excepturi, voluptatibus ducimus dolorum sequi! In non nam ea perspiciatis, odit facilis, quo dicta aliquam? Praesentium minima laboriosam fugiat ab autem repellat eum neque, maiores dolor iste rem quia porro veniam vero, rerum, iure animi veritatis eligendi atque fugit iusto nesciunt. Expedita quo, veniam!
      </p>
       </div>
    </div>
    <div id="Page_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas necessitatibus quos vero, explicabo. Perferendis aperiam nostrum corporis, mollitia illo minus placeat quidem sapiente maxime cupiditate explicabo provident, veritatis facilis at! Deserunt odio commodi temporibus debitis, eligendi. Quisquam qui enim pariatur nulla voluptatibus, provident in libero ipsum temporibus, fugiat odit quidem. Dignissimos est corporis explicabo deserunt quasi excepturi, voluptatibus ducimus dolorum sequi! In non nam ea perspiciatis, odit facilis, quo dicta aliquam? Praesentium minima laboriosam fugiat ab autem repellat eum neque, maiores dolor iste rem quia porro veniam vero, rerum, iure animi veritatis eligendi atque fugit iusto nesciunt. Expedita quo, veniam!</div>
    </div>
    <div class="info_panel">
      <span class="i">i</span>
    </div>
</body>
</html>
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
23.04.2015, 22:29
Ошибок нет в консоли? Как вы определяете что ничего не происходит? Может у вас есть ещё код который работает с этими же элементами?
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
24.04.2015, 08:41  [ТС]
Ошибок нет. Определил потому что я знаю что должно происходить, а это не происходит. Смотрел отладчиком. Событие обрабатывается. Но результата от этого нет.
Цитата Сообщение от Armi Посмотреть сообщение
Может у вас есть ещё код который работает с этими же элементами?
Какой код? Можете объяснить?

Добавлено через 9 часов 54 минуты
Цитата Сообщение от Armi Посмотреть сообщение
Как вы определяете что ничего не происходит?
Я написал что ничего не происходит - это не так. Просто происходит тоже, что у меня было до этого. - Работает только кнопка. При клике вне элемента ничего не происходит
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
24.04.2015, 21:06
Вот пример в песочнице с вашим кодом.
https://jsfiddle.net/kdw3wqjv/4/

Добавлено через 59 секунд
JavaScript
1
<script type="text/javascript" src="scripts.js"></script>
Это что?
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
25.04.2015, 09:04  [ТС]
Цитата Сообщение от Armi Посмотреть сообщение
Вот пример в песочнице с вашим кодом.
Спасибо что туда закинули. Но (это не конкретно вам, а всем-всем-всем - вопрос ещё остаётся открытым
Цитата Сообщение от Armi Посмотреть сообщение
Это что?
Это подключение файла со скриптами.
0
312 / 106 / 69
Регистрация: 18.04.2015
Сообщений: 346
25.04.2015, 17:33
Цитата Сообщение от diargon3454 Посмотреть сообщение
Спасибо что туда закинули. Но (это не конкретно вам, а всем-всем-всем - вопрос ещё остаётся открытым
Я к тому что все работает, что вам ещё нужно?

Цитата Сообщение от diargon3454 Посмотреть сообщение
Это подключение файла со скриптами.
Я и сам вижу. Я про то что это вами код написанный?
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
25.04.2015, 20:20  [ТС]
Цитата Сообщение от Armi Посмотреть сообщение
Я к тому что все работает, что вам ещё нужно?
У меня не работает.
Цитата Сообщение от Armi Посмотреть сообщение
Я и сам вижу. Я про то что это вами код написанный?
Да, это мой код.

Добавлено через 5 минут
Я повторюсь. Мне нужно совершать toogle, при нажатии вне элемента, но только если toogle не в изначальном положении.
0
18 / 18 / 4
Регистрация: 30.09.2013
Сообщений: 519
27.04.2015, 23:46  [ТС]
Up!
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
27.04.2015, 23:46
Помогаю со студенческими работами здесь

Можно ли задать один блок div относительно другого div-а?
Привет. Пытаюсь сделать слои, по этому примеру. Там они используют абсолютное позиционирование и пишут: &quot;Как видите, мы выбрали...

Как переместить один div внутрь другого div для каждого поста на сайте?
На сайте есть посты (div id=&quot;post-XXXX_XXXX&quot;) В каждом из постов есть див например такого вида - &lt;div class=&quot;source&quot;&gt; ...

Как прижать один div к низу другого div?
У меня есть два блока: 1) div1 фоном с помощью php выводится картинка из поста. Высота картинок не всегда одинакова, м/б 270px или...

Скрыть <DIV> при клике на динамическом баннере, находящемся в данном <DIV>
Добрый день. Есть &lt;li&gt; , в нем находится динамический баннер . Необходимо, чтобы при клике по баннеру происходил переход по ссылке,...

Показать div поверх другого div при наведении
У меня есть таблица. В каждой ячейке есть div. Так вот надо чтобы при наведении на этот блок, появлялся overlay и поверх него div....


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

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

Новые блоги и статьи
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru