Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2016, 14:19
Новичок на форуме
Отправить личное сообщение для Njeee Посмотреть профиль Найти все сообщения от Njeee
 
Регистрация: 17.11.2016
Сообщений: 4

Подскажите что можно оптимизировать show\hide
Всем привет. Сделал скрытие\показ при нажатии на кнопку, но понял что в таком виде код будет слишком большим и наверняка есть более простой способ реализовать это. Если кому не сложно посмотрите и подскажите что изменить или добавить.

http://codepen.io/nojee/pen/GNNpay

<html><head>

<style> #box2,#box3 {display:none;} </style> 

<script>

function hide(){
	document.getElementById("box1").style.display = 'none';
	document.getElementById("box2").style.display = 'none';
	document.getElementById("box3").style.display = 'none';
}

function showbox1(){
	document.getElementById('box1').style.display = 'block';
}
function showbox2(){
	document.getElementById('box2').style.display = 'block';
}
function showbox3(){
	document.getElementById('box3').style.display = 'block';
}
</script>

</head>
<body>

<div class="mainbar">
	<div id="box1">
		<h2>TEST1</h2>
		<p>Текст№1</p>
	</div>
	<div id="box2">
		<h2>TEST2</h2>
		<p>Текст№2</p>
	</div>
	<div id="box3">
		<h2>TEST3</h2>
		<p>Текст№3</p>
	</div>
</div>

<input type="button" onclick="hide(), showbox1()" value="test 1" />
<input type="button" onclick="hide(), showbox2()" value="test 2" />
<input type="button" onclick="hide(), showbox3()" value="test 3" />


</body>
</html>


Желательно на чистом js, без использования библиотек.
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2016, 14:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Njeee,
форум поиск открывашка
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2016, 15:22
Новичок на форуме
Отправить личное сообщение для Njeee Посмотреть профиль Найти все сообщения от Njeee
 
Регистрация: 17.11.2016
Сообщений: 4

Огромное спасибо, если бы знал что именно искать нужно "открывашку"
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2016, 15:57
Новичок на форуме
Отправить личное сообщение для Njeee Посмотреть профиль Найти все сообщения от Njeee
 
Регистрация: 17.11.2016
Сообщений: 4

Нашел нужную реализацию, как раз то что я искал! Но если нажать на любую точку вне выводимого блока, блок исчезает. Можно как то убрать это?

http://codepen.io/nojee/pen/GNNpay

function init() {
				var form = document.querySelectorAll('.box'),
						tel = document.querySelectorAll('.openbox'),
						open;
				document.onclick = function(event) {
						var elem = event.target;
						if (open && (elem === open || open.contains(elem))) return false;
						if (elem.classList.contains('openbox')) {
								for (var i = 0; i < tel.length; i++) {
										if (elem === tel[i]) break
								}
								if (open && open !== form[i]) open.classList.remove("show");
								open = form[i];
								open.classList.toggle("show");
								return false;
						}
					open &&   open.classList.remove("show");
				}
		}
		window.onload = init;


Хотелось бы что бы скрипт реагировал только на кнопки.
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2016, 16:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,157

Njeee,
<!DOCTYPE html><html class=''>
<head>
  <meta charset="utf-8">
<style class="cp-pen-styles">.box.show {  visibility: visible; opacity: 1; }
.box{
  background-color: green;
  display: inline-block;
  left: 50%;
  opacity: 0;
  padding: 15px;
  width: 300px;
  height: 323px;
  position: fixed;
  text-align: justify;
  top: 40%;
  visibility: hidden;
  z-index: 999999;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity .5s, top .5s;
  -moz-transition: opacity .5s, top .5s;
  -ms-transition: opacity .5s, top .5s;
  -o-transition: opacity .5s, top .5s;
  transition: opacity .5s, top .5s;
  border-radius: 11px;
}</style></head><body>

<html><head>

  <script>
    function init() {
        var form = document.querySelectorAll('.box'),
            tel = document.querySelectorAll('.openbox'),
            open;
        document.onclick = function(event) {
            var elem = event.target;
                if (elem.classList.contains('openbox')) {
                for (var i = 0; i < tel.length; i++) {
                    if (elem === tel[i]) form[i].classList.toggle("show")
                    else form[i].classList.remove("show")
                }

                return false;
            }

        }
    }
    window.onload = init;
  </script>

</head>
<body>

<div class="mainbar">
  <div class="box">
    <h2>TEST1</h2>
    <p>Текст№1</p>
  </div>
  <div class="box">
    <h2>TEST2</h2>
    <p>Текст№2</p>
  </div>
  <div class="box">
    <h2>TEST3</h2>
    <p>Текст№3</p>
  </div>
</div>


<a href="#" class="openbox">test 1</a>
<a href="#" class="openbox">test 2</a>
<a href="#" class="openbox">test 3</a>

</body>
</html>

</body></html>
Ответить с цитированием
  #6 (permalink)  
Старый 18.11.2016, 07:56
Новичок на форуме
Отправить личное сообщение для Njeee Посмотреть профиль Найти все сообщения от Njeee
 
Регистрация: 17.11.2016
Сообщений: 4

рони, большое спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Смишных картинок тред megaupload Оффтопик 3438 27.08.2020 17:03
Как можно узнать что value в INPUT изменилось? moskrc jQuery 2 22.10.2010 09:06
Подскажите плизз как можно упростить код frolvict Общие вопросы Javascript 19 08.04.2010 14:23
Что можно и нужно прочитать про валидацию? Amateur Общие вопросы Javascript 5 09.03.2010 11:41
Как изменить скрипт, что бы им его можно было использовать для нужной страницы Nick50_70 Общие вопросы Javascript 0 28.04.2009 23:30