Форумы портала PHP.SU :: Версия для печати :: Клик по кнопкам с открытием блоков

Страниц (1): [1]

1. leshiy - 23 Марта, 2020 - 15:18:13 - перейти к сообщению

Есть код на jquery который открывает и закрывает определенные блоки при кликах по кнопкам или вне этих блоков.Помогите переделать его на javascript.

CODE (html):
скопировать код в буфер обмена

 
<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>

</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">

</ui><a href="/categor.html" id="v-cat" class="block">Все категори</a></div>

<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>

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();}}});

<span class="wpo">Поиск</span>

<span class="wcat">Категории</span></div>

<button type="submit" name="sub" id="poisk-m">Искать</button>

<li id="b5" class="kn-cat">Категории</li>

<li id="b6">Сортировать</li>

<ui id="categor">категории</ui>

<a href="/categor.html" id="v-cat" class="block">Все категори</a>

<ul><b id="n-sort">Сортировать по: </b>

<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>

{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)

{$('#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")

{document.getElementById('b1').className='sear actkn'}}else{if(document.getElementById('b2'))

#test1{border:1px solid #000000; width:500px;height: 100px;padding:20px;cursor:pointer}

#test2{border:1px solid #FF0000; width:100px;height: 50px}

<div id="test1" onclick="DDD()">test1

el = document.getElementById("test2");

dis=el.style.display;