Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.05.2020, 12:09
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 673

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
function overflow(){
bodyOverflow.classList.toggle("overflow_mobile");
pageNavig.classList.toggle("page_navig_show");
}
buttonNavigMobile.addEventListener("click", overflow);

остальное лишнее.
он так не коректно будет работать.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<style>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body{
	font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
	font-size: .8rem;
	line-height: 160%;
}
.overflow_mobile{
	overflow: hidden;
}
.main{
	position: relative;
}
#button_navig_mobile{
	width: 100%;
	background-color: #ccc;
	color: #fff;
	display: none;
}
.page_wrap{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: minmax(320px, 1440px) minmax(320px, 640px);
	grid-template-areas: 
	"content navig";	
	grid-row-gap: 20px;
	grid-column-gap: 20px;
	justify-content: center;
}
.page_content{
	grid-area: content;
	justify-self: center;
}
.page_navig{
	grid-area: navig;
	z-index: 2;
	justify-self: end;
	background-image: url("../images/picture_02.jpg");
	
}
.content{
	width: 1024px;
}
.navig{
	width: 320px;
}

</style>
</head>

<body>
<div class="main">
<div id="button_navig_mobile">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, iste.</div>
<div class="page_wrap">
	<div class="page_content"><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt fuga similique aspernatur nesciunt quos sit voluptatem iusto ipsum ex modi. Non consectetur velit nostrum aperiam nam ipsum accusantium laudantium suscipit reprehenderit odit. Amet tenetur vel quibusdam ipsa atque unde corporis minima. Veritatis, assumenda quod quasi! Necessitatibus facere officia, quia, perspiciatis aliquid quis recusandae consequuntur, cum beatae iste, eveniet fugiat corrupti a. Deleniti quaerat quae aperiam vel iste. Eius vero beatae unde non excepturi. Illo sequi expedita quasi vel dolores voluptatem rerum alias cupiditate, veniam eos labore quidem pariatur ipsa, assumenda eveniet maxime, dolorum ipsum delectus hic atque architecto harum laborum quia ab. Quam, laboriosam! Veritatis ipsam id similique cupiditate soluta pariatur rerum quisquam quia facilis sunt error, iure, voluptas tenetur iusto repellat eius aperiam. Accusantium quam in reprehenderit minima corporis, dolorum quisquam sequi ratione, optio doloribus quas itaque amet dignissimos, corrupti. Officiis repudiandae, sit animi incidunt velit amet, cumque accusantium placeat perspiciatis dolor beatae iste qui aliquid minus voluptatem molestiae architecto earum tempora rerum quidem similique odio itaque? Fuga et beatae fugit quo vel tenetur sed, modi ducimus dicta, maiores laboriosam! Nesciunt animi ullam magni corporis similique ex eos eius quidem dolor non, odio id illum alias deserunt error facilis, assumenda quis suscipit. Rem, inventore eos. Voluptates sit, non saepe fuga, sed aliquid cupiditate molestias est rem ipsam labore magnam asperiores modi inventore iste facere, beatae voluptatibus blanditiis quibusdam neque! Rem vero blanditiis nemo ut dolorem aperiam possimus, quisquam eligendi earum nulla. Eaque ipsa blanditiis, doloremque dolorum nesciunt quos quam quis eveniet reprehenderit culpa consectetur magnam, accusantium enim autem reiciendis magni tempora voluptates accusamus perspiciatis architecto necessitatibus praesentium deleniti numquam fugit! Laborum doloremque molestias aperiam dolor modi, temporibus voluptate necessitatibus adipisci totam fuga dolorem, odit cum et ea consectetur facere sapiente ipsa deserunt quidem accusantium hic aut officiis consequatur. Nesciunt voluptatibus temporibus, doloribus, adipisci vero ea id tenetur possimus quas dicta asperiores quaerat assumenda in ratione mollitia. Quae sequi animi, suscipit odio a dolore quas enim ipsam totam! Repudiandae, similique possimus, debitis quod accusantium beatae consequatur natus recusandae excepturi quas a necessitatibus dignissimos soluta pariatur laborum autem! Quam optio quis modi commodi eos illum temporibus neque, natus vel rem iure ipsam nemo ratione, unde architecto suscipit voluptate, ut facilis atque est quasi velit fuga rerum! Beatae, sapiente quibusdam, est velit impedit quo. Sunt sint voluptates expedita excepturi numquam temporibus, quidem placeat ipsam exercitationem dolorum voluptatem molestias! Repellat nobis odio eveniet aperiam ad perspiciatis consequuntur error architecto pariatur voluptates corporis, officia dolore delectus inventore tempore qui temporibus, quo odit recusandae voluptate. Adipisci quam sequi incidunt qui eligendi, veniam itaque quia quos illum excepturi voluptatem, voluptatum tempora, quo ipsa repudiandae sunt facere. Placeat mollitia nostrum at excepturi necessitatibus alias quasi itaque, culpa ut ipsum facere omnis maxime cumque deleniti unde qui accusantium amet, provident quo incidunt nemo reiciendis quae, ullam. Inventore qui dolore tempore excepturi explicabo sunt. Perspiciatis eum architecto laborum est atque aliquid vel iusto aut suscipit porro. Totam minima dolorum quis odit quisquam saepe, at tempore sit tempora. Natus iusto, modi quia laudantium saepe alias ea!</div></div>
	<div class="page_navig"><div class="navig">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos debitis eligendi necessitatibus libero, doloribus nostrum vero corporis deserunt repellat ipsum, repellendus dignissimos itaque blanditiis explicabo assumenda unde dolorem aliquid magni!</div></div>
</div>
</div>
<script>
const buttonNavigMobile = document.querySelector("#button_navig_mobile");
const pageNavig = document.querySelector(".page_navig");
const bodyOverflow = document.querySelector("body");

function overflow(){
bodyOverflow.classList.toggle("overflow_mobile");
}
buttonNavigMobile.addEventListener("click", overflow);

function navigHideShow(){
	if (pageNavig.className === "page_navig"){
		pageNavig.classList.remove("page_navig_hide");
		pageNavig.classList.add("page_navig_show");
	}
	else if (pageNavig.className === "page_navig page_navig_show"){
		pageNavig.classList.remove("page_navig_show");
		pageNavig.classList.add("page_navig_hide");
	}
	else if (pageNavig.className === "page_navig page_navig_hide"){
		pageNavig.classList.remove("page_navig_hide");
		pageNavig.classList.add("page_navig_show");
	}
}
buttonNavigMobile.addEventListener("click", navigHideShow);


function resizeWindows(){
	let x = window.matchMedia("(max-width: 650px)").matches;
		if(x){
			pageNavig.classList.remove("page_navig_hide");
			pageNavig.classList.remove("page_navig_show");
		}
}
window.addEventListener("resize", resizeWindows);
</script>
</body>
</html>


просто когда происходит ресайз старинцы, классы остаются
Ответить с цитированием
  #12 (permalink)  
Старый 16.05.2020, 12:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Сергей Ракипов,
Использование медиа-запросов
Ответить с цитированием
  #13 (permalink)  
Старый 16.05.2020, 13:31
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 673

Сообщение от рони Посмотреть сообщение
правильнее не использовать className в условии(есть classList.contains)
ну вот почему не срабатывает

function navigHideShow(){
  if (pageNavig.classList.contains("page_navig")){
    pageNavig.classList.remove("page_navig_hide");
    pageNavig.classList.add("page_navig_show");
  }
  else if (pageNavig.classList.contains("page_navig") && pageNavig.classList.contains("page_navig_hide")) {
    pageNavig.classList.remove("page_navig_show");
    pageNavig.classList.add("page_navig_hide");
  }
  else if (pageNavig.classList.contains("page_navig") && pageNavig.classList.contains("page_navig_show")) {
    pageNavig.classList.remove("page_navig_hide");
    pageNavig.classList.add("page_navig_show");
  }
}
buttonNavigMobile.addEventListener("click", navigHideShow);


Если я пишу в условии className то все работает
Ответить с цитированием
  #14 (permalink)  
Старый 16.05.2020, 13:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,137

Сергей Ракипов,
нужно описание того что делает функция, что делает макет, что вы хотите сделать.
function navigHideShow(){
  if (!pageNavig.classList.contains("page_navig_show")){
    pageNavig.classList.remove("page_navig_hide");
    pageNavig.classList.add("page_navig_show");
  }
  else {
    pageNavig.classList.remove("page_navig_show");
    pageNavig.classList.add("page_navig_hide");
  }
}
Ответить с цитированием
  #15 (permalink)  
Старый 16.05.2020, 14:11
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 673

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
нужно описание того что делает функция, что делает макет, что вы хотите сделать.
function navigHideShow(){
  if (!pageNavig.classList.contains("page_navig_show")){
    pageNavig.classList.remove("page_navig_hide");
    pageNavig.classList.add("page_navig_show");
  }
  else {
    pageNavig.classList.remove("page_navig_show");
    pageNavig.classList.add("page_navig_hide");
  }
}
функция проверяет наличие классов, если их находит то делает удаление и удаление нужных классов.

вот эта функция работает

function navigHideShow(){
	if (pageNavig.className === "page_navig"){
		pageNavig.classList.remove("page_navig_hide");
		pageNavig.classList.add("page_navig_show");
	}
	else if (pageNavig.className === "page_navig page_navig_show"){
		pageNavig.classList.remove("page_navig_show");
		pageNavig.classList.add("page_navig_hide");
	}
	else if (pageNavig.className === "page_navig page_navig_hide"){
		pageNavig.classList.remove("page_navig_hide");
		pageNavig.classList.add("page_navig_show");
	}
}
buttonNavigMobile.addEventListener("click", navigHideShow);
Ответить с цитированием
  #16 (permalink)  
Старый 16.05.2020, 14:18
Профессор
Отправить личное сообщение для Сергей Ракипов Посмотреть профиль Найти все сообщения от Сергей Ракипов
 
Регистрация: 01.06.2010
Сообщений: 673

Сообщение от рони Посмотреть сообщение
Сергей Ракипов,
нужно описание того что делает функция, что делает макет, что вы хотите сделать.
function navigHideShow(){
  if (!pageNavig.classList.contains("page_navig_show")){
    pageNavig.classList.remove("page_navig_hide");
    pageNavig.classList.add("page_navig_show");
  }
  else {
    pageNavig.classList.remove("page_navig_show");
    pageNavig.classList.add("page_navig_hide");
  }
}
а вот эта функция сработала !

а условия читает так, элемент, проверим на классы, и если элемент не содержит такой класс page_navig_show то...

просто непонятно почему ! в начале я первый раз такую запись вижу
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как отделить несколько инпутов, если я не знаю какое будет их кол-во и не знаю id фор drkrol jQuery 1 07.03.2016 01:38
ng-template - Как добавить несколько шаблонов в один тег посредство ng-click A1x1On2015 Angular.js 0 02.02.2016 18:13
Как правильно определить делегирование событий? Coriolan161 Events/DOM/Window 5 07.12.2015 23:45
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как можно нажать сразу на несколько кнопок? Yan.Total Events/DOM/Window 2 21.03.2013 11:02