Открыть, закрыть несколько блоков на javascript

@leshiy · Регистрация: 08.10.2009

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

Есть несколько кнопок при кликах по которым должны открываться соответствующие блоки и при повторном клике по кнопкам или вне блоков блоки должны закрываться.Нашел рабочий код но он только для одной кнопки с блоком.

PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
<html><head>
<style>
*{font-family: sans-serif;}.page {display: flex;}.hamburger {background-color: #222;width: 100px;height: 100px;border: 0;border-radius: 50%;cursor: pointer;}.hamburger .line {width: 70px;height: 10px;margin-left: 10px;background-color: #fff;pointer-events: none;}.hamburger .line:not(:last-child) {margin-bottom: 10px;}.menu {display: none;background-color: #222;color: #fff;padding: 5px 0;}.menu .item {padding: 5px 15px;cursor: pointer;}.menu.active {display: inline-block;}.poisk{background-color: blue;color:white;cursor:pointer}.vp{width:200px;height:100px;background-color:red}.categories{background-color: darkorange;cursor:pointer}.vcat{background-color: springgreen;width:200px;height:100px}
    </style>
</head>
<body>
    <div class="page">
  <button class="hamburger">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </button>
  <div class="menu">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
        <button class="poisk">Поиск</button>
        <div class="vp"></div>
        <button class="categories">Категории</button>
        <div class="vcat"></div>
</div>
    <script type="text/javascript">
        let hamburger = document.querySelector('.hamburger');
let menu = document.querySelector('.menu');
const toggleMenu = () => {
menu.classList.toggle('active');
}
hamburger.addEventListener('click', e => {
e.stopPropagation();
toggleMenu();
});
document.addEventListener('click', e => {
let target = e.target;
let its_menu = target == menu || menu.contains(target);
let its_hamburger = target == hamburger;
let menu_is_active = menu.classList.contains('active');
if (!its_menu && !its_hamburger && menu_is_active) {
toggleMenu();
}});
    </script>
</body></html>

@fixeri · 22.03.2020, 18:22

leshiy,

PHP/HTML
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
31
32
33
34
35
36
37
38
39
40
41
42
43
<html>
    <head>
    <style>
    *{font-family: sans-serif;}.page {display: flex;}.hamburger {background-color: #222;width: 100px;height: 100px;border: 0;border-radius: 50%;cursor: pointer;}.hamburger .line {width: 70px;height: 10px;margin-left: 10px;background-color: #fff;pointer-events: none;}.hamburger .line:not(:last-child) {margin-bottom: 10px;}.menu {display: none;background-color: #222;color: #fff;padding: 5px 0;}.menu .item {padding: 5px 15px;cursor: pointer;} .active {display: inline-block !important;}.poisk{background-color: blue;color:white;cursor:pointer}.vp{width:200px;height:100px;background-color:red; display: none;}.categories{background-color: darkorange;cursor:pointer}.vcat{background-color: springgreen;width:200px;height:100px; display: none;}
        </style>
    </head>
    <body>
        <div class="page">
            <button class="hamburger">
                <div class="line"></div>
                <div class="line"></div>
                <div class="line"></div>
            </button>
            <div class="menu">
                <div class="item">One</div>
                <div class="item">Two</div>
                <div class="item">Three</div>
            </div>
            <button class="poisk">Поиск</button>
            <div class="vp"></div>
            <button class="categories">Категории</button>
            <div class="vcat"></div>
        </div>
        <script type="text/javascript">
            "use strict";
 
            let page = document.getElementsByClassName("page")[0];
            let previoEl = null;
            page.addEventListener("click", () => {
                let currentE = event.target;
                if (currentE.tagName !== "BUTTON") return false;
                let curENext = currentE.nextElementSibling;
                curENext.classList.toggle("active");
                if (previoEl && previoEl !== curENext) previoEl.classList.remove("active");
                previoEl = curENext;
            });
 
            window.addEventListener("click", () => {
                if (!event.target.closest(".page")) previoEl.classList.remove("active");
            });
        </script>
    </body>
</html>

Добавлено через 5 минут

@leshiy · 23.03.2020, 16:26 **[ТС]**

Ссори но так не подходит.Как бы вот тот код на jquery переделать на javascript.

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
<html><head>
<link href="//leshiy-game.ru/css.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="gl-blocl" class="gl"><div class="hv"><div class="hvv"><div class="tab vlr"><div id="b4" class=""><p></p></div><div id="vpr" class="fl">
</div></div><div class="tab vc"></div><div class="tab vlr"><div id="b1" class="sear"><span class="wpo">Поиск</span></div><div id="b2" class="vn"><span class="wcat">Категории</span></div><div id="b3"><p></p></div></div></div></div><div class="vn-g"><div class="vn-n b7"></div></div><div id="h-n"><div class="hvv b7"><div class="h-n-sh"><div class="h-nl"><div class="h-n-v">
<div id="n-str"></div></div></div><div id="col3"><div class="gl3"><div id="r-str"></div></div></div><div gl-cen><div class="h-n-tab"><div class="h-n-v"></div></div></div></div></div></div><div class="misk" id="mpois"><form id="po" class="form-p" action="/search.html" method="post"><input type="text" placeholder="Поиск" name="q" id="who" autocomplete="off" min="3"><button type="submit" name="sub" id="poisk-m">Искать</button></form></div><div id="v-p"></div><div id="kr"><span id="krol" class="4267"></span></div><div class="" id="men1"><ul><li id="b5" class="kn-cat">Категории</li><li id="b6">Сортировать</li><li id="vprm">
</li></ul></div>
<div class="mcat-all b7" id="m-cat"><ui id="categor">
категории
</ui><a href="/categor.html" id="v-cat" class="block">Все категори</a></div>
<div id="fon">
    <div id="sort" class="msor"><ul><b id="n-sort">Сортировать по: </b><li class="desc" id="id">Дате</li><li class="sort" id="view">Популярности</li><li class="sort" id="title">Алфавиту</li><li class="sort" id="prod">Времени</li><li class="sort" id="rating">Рейтингу</li><li class="sort" id="com">Комментариям</li></ul></div></div>
<script>
var rels=[['#b1','.isk'],['#b2','.cat-all'],['#b3','.misk'],['#b4','#men1 ul'],['#b5','.mcat-all'],['#b6','.msor']];var loop=function loop(i){var btn=rels[i][0];var block=rels[i][1];$(btn).click(function()
{if(btn=='#b5'){var cat=document.getElementById("gl-block").className;$.ajax({url:"index.php",type:'POST',data:"v_cat=vc&cat_adr="+cat,success:function(html)
{$("#categor").html(html);}});}$(block).toggle();if($('.isk').css('display')=='block'){document.getElementById('b1').className='sear actkn'}else{document.getElementById('b1').className='sear'}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block')
{$('#h-n').hide();}else{$('#h-n').show();}if($('.mcat-all').css('display')=='block'){$('#men1 ul').hide();}});};for(var i=0;i<rels.length;i++){loop(i);}$(document).click(function(event)
{for(var i=0;i<rels.length;i++){var btn=rels[i][0];var block=rels[i][1];var $btn=$(btn);var $block=$(block);if($("#mpois").css("display")=="block")
{$("#who").focus();}if($btn.is(event.target)||$block.is(event.target)||$btn.has(event.target).length||$block.has(event.target).length)continue;var bpois=$("#v-p");var mpois=$('#mpois');if(bpois.css('display')=='block')
{if(!bpois.is(event.target)&&bpois.has(event.target).length===0&&!mpois.is(event.target)&&mpois.has(event.target).length===0){bpois.hide();mpois.hide();}}else{$(block).hide();}if($('.cat-all').css('display')=='block'){if(document.getElementById('b2'))
{document.getElementById('b2').className='vvr actkn'}}else{if(document.getElementById('b2')){document.getElementById('b2').className='vn'}}if($('.isk').css('display')=='block'){if(document.getElementById('b2'))
{document.getElementById('b1').className='sear actkn'}}else{if(document.getElementById('b2'))
{document.getElementById('b1').className='sear'}}if($('.isk').css('display')=='block'||$('.cat-all').css('display')=='block'||$('.mcat-all').css('display')=='block'||$('.misk').css('display')=='block'||$('#men1 ul').css('display')=='block'||$('.msor').css('display')=='block'){$('#h-n').hide();}else{$('#h-n').show();}}});
    </script>
</body></html>

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/