Действие по клику из вне div и переключение .toggle

@eisenheim · Регистрация: 06.06.2011

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

Добрый день! Столкнулся с такой проблемой - есть див, по клику которого открывается менюшка. Реализовано это через .toggle, но захотелось, чтобы меню закрывалась ещё и при нажатии в любое место на сайте. Сделал. Но тогда, после нажатия в любое место на сайте, чтобы заного открыть меню, нужно два раза кликнуть по div'у, т.к. toggle сработал только один раз. Может не понятно.. Вот сам код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  $('.folder').toggle(
   function(){
    $('.texture').animate({height:'227px', paddingTop:'10px', opacity:'1'}, 300)
    $(this).find('.img').animate({"box-shadow": '0 0 0px 0px rgba(0,0,0,0.8)', opacity: '0.7'}, 300)
   },
   function(){
    $('.texture').animate({height:'0px', paddingTop:'0px', opacity:'0'}, 300)
    $(this).find('.img').animate({"box-shadow": '0 0 0px 0px rgba(0,0,0,0.8)', opacity:'1'}, 300)
   }
  )
 
$(document).bind('click',function(e){
 if ($(e.target).closest('.texture').length) return; //если нажали внутри элемента то просто выходим (можно return true);
 $('.texture').animate({height:'0px', paddingTop:'0px', opacity:'0'}, 300);//иначе скрываем
 e.stopPropagation();//подавляем всплытие событие, мб. даже не обязательно
});

Подскажите пожалуйста, как решить данную проблему.

P.S. В JS я не разбираюсь. Могу вот только такие вещи делать, и то с помощью Google.

Добавлено через 6 минут
Решил проблему сам.
Если кто найдёт её в интернете, и нужно будет решение, вот:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if ($('.texture').css('height') == '0px') {
  $('.folder').click(
   function(){
    $('.texture').animate({height:'227px', paddingTop:'10px', opacity:'1'}, 300)
    $(this).find('.img').animate({"box-shadow": '0 0 0px 0px rgba(0,0,0,0.8)', opacity: '0.7'}, 300)
   }
  )
} else {
  $('.folder').click(
   function(){
    $('.texture').animate({height:'0px', paddingTop:'0px', opacity:'0'}, 300)
    $(this).find('.img').animate({"box-shadow": '0 0 0px 0px rgba(0,0,0,0.8)', opacity:'1'}, 300)
   }
  )
}
 
$(document).bind('click',function(e){
 if ($(e.target).closest('.texture').length) return; //если нажали внутри элемента то просто выходим (можно return true);
 if ($('.texture').css('height') == '0px') {
 if ($(e.target).closest('.folder').length) return; //если нажали внутри элемента то просто выходим (можно return true);
 }
 $('.texture').animate({height:'0px', paddingTop:'0px', opacity:'0'}, 300);//иначе скрываем
 e.stopPropagation();//подавляем всплытие событие, мб. даже не обязательно
});

@skv1991 · 16.03.2013, 13:20

В js не разбираешься))) я бы ввел переменную, которая будет принимать значение true когда меню открыто, и false, когда закрыто, и сделать проверку при клике, чему равна переменная (изначально false).
А так можно и animate потом использовать либо slideDown команду и т.п. Молодец что разобрался! Не забывай html код тоже приводить и css =)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@skv1991 19 / 19 / 2 Регистрация: 14.05.2012 Сообщений: 39
	16.03.2013, 13:20
	В js не разбираешься))) я бы ввел переменную, которая будет принимать значение true когда меню открыто, и false, когда закрыто, и сделать проверку при клике, чему равна переменная (изначально false). А так можно и animate потом использовать либо slideDown команду и т.п. Молодец что разобрался! Не забывай html код тоже приводить и css =) 1