ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ |

Показать блок – скрыть блок нажав по странице

Начнем с описания задачи – нам нужно нажать какую-то кнопку – показать блок. Но далее человеку оказалось ненужным показанный блок – он просто пошел смотреть страницу – автоматически скрыть блок, когда человек нажмет по другой части страницы…

Этот эффект можно наблюдать – нажмите выше в меню кнопку искать с лупой, она крайняя правая. А потом нажмите по любой точке на странице вне показанного блока…

Вам кажется эта задачка простой!? Мне пришлось немного поломать голову, как я уже не однажды говорил - javascript – это новый для меня язык.

Если вам кажется эта задачка простой, то вы можете предложить свое решение, не читая дальше..

Следующим вашим вопросом должен быть такой:

Неужели нет никаких вариантов уже готовых таких в интернете!

Есть! Много! Но я вообще не врубаюсь… видимо я такой тупой, что реально не могу понять, что они там пишут! Ведь это должно решаться очень просто…. 5 строк кода и готово! Но увы, либо это очень много кода. Либо код тупо не работает!

А я люблю чтобы было понятно м просто!

Ну чтож…давайте попробуем разобраться!

Кстати мы как-то уже писали о видимости блока , но сейчас мы пойдет вообще другим путем! И говорю, что любая задача в программировании имеет множество решений в отличии от математики! И будем использовать getelementbyid
И да еще мы как то писали на похожую тему...

Как я не в первый раз говорю в такой задачке сперва , хотя бы примерно надо подумать над алгоритмом. Как это должно работать!

Мое предложение такое:

1. Показываем блок кнопкой
2. Закрываем код, кликая на страницу – этот блок – естественно будет под нашим.. если схематично, то картинка будет такой..
Показать блок – скрыть блок нажав по странице

Примерный код наших предположений будет такой:

Где:

Будет 2 – onclick на body и button, и наш блок, который нам нужно скрыть – показать + стили для него… Изначально блок скрыт, как вы можете наблюдать это в стилях...(display: none;)
<div id="my_blok">Здесь содержимое</div>

Две функции hide() и show()

По нажатию на кнопку –блок должен показаться, если мы нажмем по странице. То блок должен скрыться..

Итого:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>#my_blok{ display: none; width: 300px; height: 200px; background:blue; color: white; }</style>

</head>

<body onclick="hide()">

    <button onclick="show()">нажми</button>

    <div id="my_blok">Здесь содержимое</div>

<script>

function show() { document.getElementById("my_blok").setAttribute("style",  "display: block"); }

function hide() { document.getElementById("my_blok").setAttribute("style",  "display: none");  }

</script>

</body>

</html>

Ссылка для тестирования. ( здесь код не срабатывает, хотя, кожется. что он должен здесь срабавтывать!)
И что не так с этим кодом!? Ваши предположения !? Почему он не работает!?

Открываем исследовать элемент нажимаем по кнопке и смотрим в код - нас интересует вот эта строка…

Показать блок – скрыть блок нажав по странице

Естественно, что вы ничего не увидите. Потому, что это происходит очень быстро а если я вам сделаю другую – точно такую же страницу. Только в каждую строку добавим алерт! Откройте так же код и посмотрите. Что будет происходить…

Вариант с алертом

Если вы поэкспериментировали. То увидели, что вначале на самом деле отправляется display: block, но потом все равно забивается display: none

И далее сделаем два варианта на чистом javascript, а потом второй "модифицированный"

Что же нам в этой ситуации нужно сделать!?

Нам нужно чтобы, если блок виден, то второй клик не срабатывал!

1.

Теперь нужно немного модифицировать код, чтобы он работал так, как нам нужно!

Не буду каждую букву разжевывать, чтобы вы понимали алгоритм!

При нажатии на слова «нажми»(вместо кнопку нам понадобился div(с размерами, как и id="my_blok")) в кортом будет находиться блок id="my_blok")

+ в функции при нажатии на этот блок добавим переменную

peremenaya = 1.

+ Запускаем еще одну функцию

hide_2();

А выше всех функций объявили переменную

var peremenaya;

Всего у нас получилось:

var peremenaya;

function show() {

peremenaya = '1';

hide_2(); 

document.getElementById("my_blok").setAttribute("style",  "display: block");  

}

О вот основная фишка, почему наш код скроет только то. Что нуждою и когда нужно!

Если вы ранее нажелти на кнопку нажми и покаялся блок, то переменная равна единице. Но если вы нажмете на страницу. То там та переменная не равна единице… и приравняем переменную peremenaya к нулю. И вызывает здесь же функцию hide_2()

function hide(){  

    if(peremenaya  !== 1)

    {

    hide_2();  peremenaya= 0;  

    }

}

И в последней функции проверим если переменная peremenaya равна нулю, то скрываем блок – все просто!

function hide_2(){ 

    if(peremenaya == 0)

    {

    document.getElementById("my_blok").setAttribute("style",  "display: none");  

    }

}

Смотрим, что у вас должно получиться... Результат
Весь код скачать блок № 26
2.

Вариантом номер 1 я пользовался некоторое время и вот пришло время написать эту страницу, и я начал делать тесовые страницы и пересматривать код…! И вы не поверите! Там есть ошибка! Но и тем не менее это код работает, это реальный прикол… что вы видите на тестовой странице pokasat_skrit_3.html. Кто найдет ошибку – может написать в комментариях о ней!

И вот, как говорится, раз уж я передумывал данный код, то мне показалось, что код довольно сложный для понимания и я решил, что его можно сократить и убрать ошибку! Потому, что ошибка она всегда вносит раздор в мысли!

Здесь код совершенно простой! Что уже проще и не придумаешь…

var  first , two ;

function show() {

first = two =1; 

document.getElementById("my_blok").setAttribute("style",  "display: block"); 

}

function hide(){  

     if(two ==2)  

    {  

    document.getElementById("my_blok").setAttribute("style",  "display: none");  

    } 

     else 

    {  

    two = two + first;

    }  

}
Смотрим: Результат

Скачать Показать блок – скрыть блок

Не забудь !
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 39.2
Название скрипта и номер :Показать + скрыть элемент с текстом.
Пример - Показать + скрыть элемент с текстом.
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) https://dwweb.ru/ http://calc.dwweb.ru/ http://kod.dwweb.ru/ http://marrex.ru/ http://pro.dwweb.ru/ https://f0rlink.com/ https://comments.dwweb.ru youtube Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019