PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

Здравствуйте, Гость

( Вход · Регистрация · Правила форума )

Забыли пароль?

Клик по кнопкам с открытием блоков

Форумы портала PHP.SU » PHP » Программирование на PHP » Вопросы новичков (Модераторы: OrmaJever, Саныч, Строитель)

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

Без описания

Поиск в теме | Версия для печати

leshiy	Отправлено: 23 Марта, 2020 - 15:18:13
Частый гость Покинул форум Сообщений всего: 188 Дата рег-ции: Июнь 2008 Помог: 0 раз(а)	Есть код на 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>

Vladimir Kheifets	Отправлено: 23 Марта, 2020 - 17:26:32
Частый посетитель Покинул форум Сообщений всего: 879 Дата рег-ции: Март 2017 Откуда: Германия, Бавария Помог: 37 раз(а)	leshiy пишет: Есть код на 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> Добрый день! Вы показали совершенно нечитаемый код. Это Ваш код. Спойлер (Отобразить) 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 id="gl-blocl" class="gl"> не закрыт. Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом. Удачи! (Отредактировано автором: 23 Марта, 2020 - 17:28:07)

LIME	Отправлено: 24 Марта, 2020 - 14:22:05
Активный участник Покинул форум Сообщений всего: 10732 Дата рег-ции: Нояб. 2010 Помог: 322 раз(а)	Vladimir Kheifets пишет: Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом. еще как будут вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает он работает с DOM-моделью построенной браузером а там уж как парсер решит ее построить по невалидному тексту, такая она и будет javascript-у фиолетово, он работает с валидным деревом уже после парсинга а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности эксперименты с XHTML не помогли

Vladimir Kheifets	Отправлено: 26 Марта, 2020 - 08:43:18
Частый посетитель Покинул форум Сообщений всего: 879 Дата рег-ции: Март 2017 Откуда: Германия, Бавария Помог: 37 раз(а)	LIME пишет: Vladimir Kheifets пишет: Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом. еще как будут вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает он работает с DOM-моделью построенной браузером а там уж как парсер решит ее построить по невалидному тексту, такая она и будет javascript-у фиолетово, он работает с валидным деревом уже после парсинга а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности эксперименты с XHTML не помогли LIME пишет: Vladimir Kheifets пишет: Сомневаюсь,что jquery и/или javascript будут работать с дефектным html-кодом. еще как будут вернее с html-кодом javascript(почему jquery выделен отдельно непонятно) вообще не работает он работает с DOM-моделью построенной браузером а там уж как парсер решит ее построить по невалидному тексту, такая она и будет javascript-у фиолетово, он работает с валидным деревом уже после парсинга а браузеры наперебой соревнуются - кто как ухитрится исправить ошибки валидности эксперименты с XHTML не помогли Добрый день! "почему jquery выделен отдельно непонятно", потому что был задан конкретный вопрос leshiy пишет: Есть код на jquery который открывает и закрывает определенные блоки при кликах по кнопкам или вне этих блоков. Помогите переделать его на javascript. Верно, дом модели, браузеры наперебой соревнуются исправить ошибки валидности, НО получатся ли при этом то, что хотелось бы увидеть в браузере и будет ли это выглядеть одинаково во всех актуальных браузерах? вот два примера, управления видимости блока по клику на чистом JS (так просили) здесь потерян закрывающий тэг div и браузер сам "дододумал" DOM-модель Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <html> <head> <style> #test1{border:1px solid #000000; width:500px;height: 100px;padding:20px;cursor:pointer} #test2{border:1px solid #FF0000; width:100px;height: 50px} </style> </head> <body> <div id="test1" onclick="DDD()">test1 <div id="test2" >test2</div> <script> function DDD(){ el = document.getElementById("test2"); dis=el.style.display; dis=dis=="block"\|\|dis==""?"none":"block"; el.style.display=dis; } </script> </body> </html> здесь нет потеряных тэгов Спойлер (Отобразить) CODE (html): скопировать код в буфер обмена <html> <head> <style> #test1{border:1px solid #000000; width:500px;height: 100px;padding:20px;cursor:pointer} #test2{border:1px solid #FF0000; width:100px;height: 50px} </style> </head> <body> <div id="test1" onclick="DDD()">test1</div> <div id="test2">test2</div> <script> function DDD(){ el = document.getElementById("test2"); dis=el.style.display; dis=dis=="block"\|\|dis==""?"none":"block"; el.style.display=dis; } </script> </body> </html> Результаты, однако, получаются разные, поэтому если Вы хотите правильно управлять видимостью блоков т.е чтобы эти блоки по клику там, где хотелось бы появлялись бы в желаемом месте, лучше самостоятельно исправить ошибки валидности html, не полагаясь на искусственный интеллект, а потом уже заниматься jquery и/или javascript. Удачи! (Отредактировано автором: 26 Марта, 2020 - 08:46:45)

Поиск в теме | Версия для печати

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

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« Вопросы новичков »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.