Убрать меню при клике по другой области

@pie · Регистрация: 24.12.2010

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

Добрый день.
Есть кнопочка при клике на которую выводится блок с меню. И закрывается она тоже только при нажатии на кнопочку.
Как переделать представленный скрипт так чтобы при нажатии на любую область (кроме блока с меню) меню закрывалось?
В JS я не силен. В интернете нашел кучу всего, но никак не могу прикрутить его к текущему виду. Спасибо.

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
<nav id="account-nav" onclick="dropdown()">
    <div class="user-info">
        <div class="avatar"><img src="#"></div>
        <span class="user-name">User Name</span>
        <span class="user-type">User Type</span>
    </div>
    <ul class="dropdown">
        <li><a href="#">Настройки профиля</a></li>
        <li><a href="#">Выход</a></li>
    </ul>
</nav>

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
#account-nav .dropdown {
transition: opacity 0.5s cubic-bezier(0.06, 0.95, 0.09, 0.95),top 0.5s cubic-bezier(0.06, 0.95, 0.09, 0.95);
top: -300px;
opacity: 0;
}
#account-nav.open .dropdown {
top: 0;
opacity: 1;
}

Логика такая что при нажатии на элемент скрипт добавляет класс к блоку, и удаляет его при повторном нажатии.

JavaScript    
        
    Скопировано
1
2
3
4
function dropdown () {
var a = document.getElementById('account-nav');
a.className = (a.className == 'open' ? '' : 'open');
}

Добавлено через 3 часа 37 минут
Нашел вариант. Может кому пригодится:

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
$(document).mouseup(function (e) {
    var a = document.getElementById('account-nav');
    if ($("#account-nav").has(e.target).length === 0){
        a.className = (a.className == 'open' ? '' : '');
    }
});

@pie · 26.01.2017, 10:02 **[ТС]**

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

HTML5    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<nav class="nav">
        <div class="info">
            <span>Меню 1</span>
        </div>
        <ul class="dropdown">
            <li>Подменю 1-1</li>
            <li>Подменю 1-2</li>
        </ul>
    </nav>
    
    <nav class="nav">
        <div class="info">
            <span>Меню 2</span>
        </div>
        <ul class="dropdown">
            <li>Подменю 2-1</li>
            <li>Подменю 2-2</li>
        </ul>
    </nav>

CSS    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.nav {
    display: block;
    cursor: pointer;
    background: red;
    float: left;
    margin: 16px;
}
 
.nav:hover {
    background: blue;
}
 
.nav .dropdown {
    display: none;
    background: blue;
}
 
.nav.open .dropdown {
    display: block;
}

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function(){
            $(".nav").click(function(){
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                }   
            });
        });
        
        $(document).click( function(event){
            if( $(event.target).closest('.nav').length) 
            return;
            $('.nav').removeClass('open');
            event.stopPropagation();
        });

@Уф · 26.01.2017, 12:55

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
$(document).ready(function(){
            $(".nav").click(function(){
                if ($(this).hasClass('open')) {
                    $(this).removeClass('open');
                } else {
                    $(this).addClass('open');
                }
                $('.nav').not(this).removeClass('open'); //тут закроем все кроме нажатого
            });
        });

@pie · 26.01.2017, 13:20 **[ТС]**

Спасибо. Все заработало.

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@pie 0 / 0 / 0 Регистрация: 24.12.2010 Сообщений: 124
	26.01.2017, 13:20 [ТС]
	Спасибо. Все заработало. 0

Убрать меню при клике по другой области

Решение