Исчезание блока при нажатии на любую область

@timurbegiev · Регистрация: 04.05.2013

Студворк — интернет-сервис помощи студентам

Есть ссылка при нажатии на нее появляется блок, а при нажатии на нее ещё раз скрывается. Используется toggle(); Как можно сделать так что при нажатии на любую область кроме этого же блока, блок скрывался и ссылка тоже меня свое типо значение ( то есть при нажатии на нее ещё раз блок появлялся, а не при нажатии со второго раза.)

Пример этого в панели у гугл сверху ссылка "ещё" при нажатии на нее появляется блок с ссылками, а при нажатии скрывается и при нажатии на любую область тоже скрывается.

Делал так не получилось (jquery)

JavaScript
1
$("body:not(#block)").click(function() {$("#block").hide();});

@kalabuni · 06.05.2013, 00:43

и не получится, см. по ссылке

@newJS · 06.05.2013, 07:03

по быстрому в лоб

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>w123</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<script type="text/javascript" src="test_3.js"></script>
<link rel="stylesheet" type="text/css" href="test_3.css">
 
</head>
 
<body>
 
<div>text
<br><br><br><br><br>
text</div>
<div><input type="button" value="knopka" name="but" id="but"></div>
 
<div id="film"></div>
<div id="win"><div>окно</div></div>
<div id="heiWin"></div>
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {background:pink;}
 
#heiWin {position:fixed; bottom:0; right:0; width:1px; height:1px;}
#heiWin {visibility:hidden;}
 
#film {position:fixed; top:0; left:0; width:100%; cursor:pointer;}
#film {opacity:0.09; background:yellow; visibility:hidden;}
#film {filter:progid:DXImageTransform.Microsoft.alpha(opacity=9);}
 
#win {position:fixed; top:50%; left:50%; width:400px; height:300px;}
#win {margin:-150px 0 0 -200px; border:3px solid red; background:silver;}
#win {visibility:hidden;}
 
#win div {padding:9px;}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
onload=function(){
var h=0
document.getElementById("but").onclick=clik1;
document.getElementById("film").onclick=clik2;
h=document.getElementById("heiWin").offsetTop;
document.getElementById("film").style.height=h+'px';
 
 };
 
function clik1(){
document.getElementById("film").style.visibility="visible";
document.getElementById("win").style.visibility="visible";
 
 };
 
function clik2(){
document.getElementById("film").style.visibility="hidden";
document.getElementById("win").style.visibility="hidden";
 
 };

Сообщение от kalabuni

см. по ссылке

Ссылка супер, самоё то, полностью поддерживаю.....

Новые блоги и статьи Все статьи Все блоги /
Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .	Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	06.05.2013, 00:43
	и не получится, см. по ссылке 0