Добавить click к body
Что нужно дописать к данному коду, чтобы возврат к исходному состоянию (Меню) можно было реализовать, как через клик по .openclosebtn, так и через клик по body?
<div id="main"> <span class="openclosebtn">Меню</span> </div> $('.openclosebtn').click(function(){ if (!$(this).data('status')) { $(this).html('Close'); $(this).data('status', true); } else { $(this).html('Меню'); $(this).data('status', false); } }); |
dupre,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #main .openclosebtn{ background-color: #228B22; color: #FFFFFF; padding: 5px 12px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $('.openclosebtn, html').click(function(event){ var btn = $('.openclosebtn'), status = !btn.data('status'); if ($(this).is(btn) && status) { event.stopPropagation(); btn.html('Close') .data('status', status); } else { btn.html('Меню') .data('status', false); } }); }); </script> </head> <body> <div id="main"> <span class="openclosebtn">Меню</span> </div> </body> </html> |
рони,
я пробую через твой код с открывающимся .sidenav window.addEventListener('DOMContentLoaded', function() { var body = document.querySelector('body'); document.addEventListener("click", function(event) { var target = event.target; if (target.closest(".sidenav") && !target.closest(".closebtn")) return; else if (target.closest("#main")) { event.preventDefault(); body.classList.toggle("open") } else body.classList.remove("open"); }); }); Работает так: кликаю sidenav, текс меняется, но сайдбар открывается только по второму клику. Выгрузил код на jsfiddle, чтоб наглядно посмотреть, но там не работает вовсе.. |
То есть: по первому клику меняется текст, и только по второму клику открывается сайдбар. При закрытии сайдбара тоже самое.
|
dupre,
не могу догадаться, что вы хотите. |
рони, весь код с которым вожусь. Хотел сделать: клик по .sidenav меняет текст и одновременно открывает либо закрывает сайдбар; всё это работает, но чуток не так: клик по .sidenav меняет текст, а сайдбар открывается либо закрывается только по второму клику. То есть, чтобы открыть сайдбар нужно кликнуть openclosebtn два раза, чтоб закрыть то же два раза..
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Главная</title> <link rel="stylesheet" href="css/libs.min.css"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="fonts/stylesheet.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <div id="mySidenav" class="sidenav"> <span class="nav_top_word">Список Меню</span> <ul class="breadcrumbs"> <li> <a href="index.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="documents.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="service.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="news.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="gallery.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="reports.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="contacts.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="contacts.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> </ul> </div> <div id="main"> <span class="openclosebtn">Меню</span> </div> <script src="js/libs.min.js"></script> <script src="js/common.js"></script> </body> </html> body { font-family: 'play', sans-serif; color: #343741; position: relative; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #f9f9f9; } .wrapper { position: absolute; } .wrapper main { padding-left: 300px; width: 700px; height: 2000px; margin-top: 200px; } .nav_top_word, p, a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background: #fff; overflow-x: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .sidenav .nav_top_word { position: relative; height: 95px; background: #F5F8FC; color: #0072ce; font-size: 18px; font-weight: 700; font-style: normal; line-height: 95px; padding-left: 17px; display: block; min-width: 300px; } .sidenav .nav_top_word:before { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #004ea8; border-left: none; border-bottom: none; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); top: 35px; left: 340px; } .sidenav a { font-size: 18.5px; font-weight: 700; font-style: normal; padding: 8px 8px 8px 13px; text-decoration: none; color: #004ea8; display: block; letter-spacing: 1px; } .breadcrumbs { margin-top: 70px; padding-bottom: 50px; } .breadcrumbs li { position: relative; height: 119px; } .breadcrumbs li:hover::after { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #fff; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 20px; left: 340px; } .breadcrumbs li:hover { background: #0072ce; } .breadcrumbs li:hover p, .breadcrumbs li:hover a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .breadcrumbs li:hover a { text-decoration: underline; } .breadcrumbs li:hover:hover * { color: #fff; } .breadcrumbs p { font-size: 14.5px; font-style: normal; font-weight: 400; width: 300px; padding: 51px 0 12px 13px; line-height: 1.2; letter-spacing: .5px; } .breadcrumbs a { position: absolute; height: 100%; width: 100%; top: 8px; } .breadcrumbs a::after { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #000; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 12px; left: 340px; } #main { position: fixed; left: 0px; top: 0; -webkit-transition: left .5s; -o-transition: left .5s; transition: left .5s; width: 100%; height: 89px; line-height: 89px; text-align: left; background: #343741; z-index: 100; } #main span { position: relative; display: inline-block; font-size: 18px; font-weight: 400; font-style: normal; color: #E5E8ED; margin-left: 80px; border: 1px solid #fff; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; line-height: 2; padding: 0 10px 0 10px; } #main span:hover { color: #004ea8; background: #fff; border-color: #004ea8; } body.open { margin-left: 380px; } body.open .sidenav { width: 380px; } body.open #main { left: 380px; } body:after { opacity: 0; content: ""; } body.open:after { content: ""; z-index: 99; background-color: #343741; opacity: .3; left: 380px; right: 0; top: 0; bottom: 0; position: fixed; -webkit-transition: all 0.3s 0.3s; -o-transition: all 0.3s 0.3s; transition: all 0.3s 0.3s; } /* ================================================== home page ================================================== */ .wrapper img { margin: 0 auto; } window.addEventListener('DOMContentLoaded', function() { var body = document.querySelector('body'); document.addEventListener("click", function(event) { var target = event.target; if (target.closest(".sidenav") && !target.closest(".closebtn")) return; else if (target.closest("#main")) { event.preventDefault(); body.classList.toggle("open") } else body.classList.remove("open"); }); }); $(function() { $('.openclosebtn, html').click(function(event){ var btn = $('.openclosebtn'), status = !btn.data('status'); if ($(this).is(btn) && status) { event.stopPropagation(); btn.html('Close') .data('status', status); } else { btn.html('Меню') .data('status', false); } }); }); |
dupre,
зачем потребовалось jquery? чтобы сменить текст, достаточно css и прежнего js |
dupre,
.openclosebtn:after { content: "Меню"; } body.open .openclosebtn:after { content: "Close"; } и убрать текст из кнопки <div id="main"> <span class="openclosebtn"></span> </div> |
В js я пока ничего можно сказать не смыслю, ну поменяю размер шрифта или цвет у всех тегов "р" на странице )
В css хоть что-то, но понимаю, но тем не менее не представляю, как это можно сделать на css... |
dupre,
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Главная</title> <style type="text/css"> body { font-family: 'play', sans-serif; color: #343741; position: relative; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; background: #f9f9f9; } .wrapper { position: absolute; } .wrapper main { padding-left: 300px; width: 700px; height: 2000px; margin-top: 200px; } .nav_top_word, p, a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background: #fff; overflow-x: hidden; -webkit-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .sidenav .nav_top_word { position: relative; height: 95px; background: #F5F8FC; color: #0072ce; font-size: 18px; font-weight: 700; font-style: normal; line-height: 95px; padding-left: 17px; display: block; min-width: 300px; } .sidenav .nav_top_word:before { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #004ea8; border-left: none; border-bottom: none; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); top: 35px; left: 340px; } .sidenav a { font-size: 18.5px; font-weight: 700; font-style: normal; padding: 8px 8px 8px 13px; text-decoration: none; color: #004ea8; display: block; letter-spacing: 1px; } .breadcrumbs { margin-top: 70px; padding-bottom: 50px; } .breadcrumbs li { position: relative; height: 119px; } .breadcrumbs li:hover::after { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #fff; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 20px; left: 340px; } .breadcrumbs li:hover { background: #0072ce; } .breadcrumbs li:hover p, .breadcrumbs li:hover a { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } .breadcrumbs li:hover a { text-decoration: underline; } .breadcrumbs li:hover:hover * { color: #fff; } .breadcrumbs p { font-size: 14.5px; font-style: normal; font-weight: 400; width: 300px; padding: 51px 0 12px 13px; line-height: 1.2; letter-spacing: .5px; } .breadcrumbs a { position: absolute; height: 100%; width: 100%; top: 8px; } .breadcrumbs a::after { position: absolute; content: ''; display: block; height: 10px; width: 10px; border: 2px solid #000; border-left: none; border-bottom: none; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 12px; left: 340px; } #main { position: fixed; left: 0px; top: 0; -webkit-transition: left .5s; -o-transition: left .5s; transition: left .5s; width: 100%; height: 89px; line-height: 89px; text-align: left; background: #343741; z-index: 100; } #main span { position: relative; display: inline-block; font-size: 18px; font-weight: 400; font-style: normal; color: #E5E8ED; margin-left: 80px; border: 1px solid #fff; -webkit-border-radius: 2px; border-radius: 2px; cursor: pointer; line-height: 2; padding: 0 10px 0 10px; } #main span:hover { color: #004ea8; background: #fff; border-color: #004ea8; } body.open { margin-left: 380px; } body.open .sidenav { width: 380px; } body.open #main { left: 380px; } .openclosebtn:after { content: "Меню"; } body.open .openclosebtn:after { content: "Close"; } body:after { opacity: 0; content: ""; } body.open:after { content: ""; z-index: 99; background-color: #343741; opacity: .3; left: 380px; right: 0; top: 0; bottom: 0; position: fixed; -webkit-transition: all 0.3s 0.3s; -o-transition: all 0.3s 0.3s; transition: all 0.3s 0.3s; } /* ================================================== home page ================================================== */ .wrapper img { margin: 0 auto; } </style> </head> <body> <div id="mySidenav" class="sidenav"> <span class="nav_top_word">Список Меню</span> <ul class="breadcrumbs"> <li> <a href="index.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="documents.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="service.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="news.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="gallery.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="reports.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="contacts.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> <li> <a href="contacts.html" target="_blank">Lorem</a> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </li> </ul> </div> <div id="main"> <span class="openclosebtn"></span> </div> <script> window.addEventListener('DOMContentLoaded', function() { var body = document.querySelector('body'); document.addEventListener("click", function(event) { var target = event.target; if (target.closest(".sidenav") && !target.closest(".closebtn")) return; else if (target.closest("#main")) { event.preventDefault(); body.classList.toggle("open") } else body.classList.remove("open"); }); }); </script> </body> </html> |
Часовой пояс GMT +3, время: 03:13. |