Подскажите что можно оптимизировать 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, без использования библиотек. |
Njeee,
форум поиск открывашка |
Огромное спасибо, если бы знал что именно искать нужно "открывашку":)
|
Нашел нужную реализацию, как раз то что я искал! Но если нажать на любую точку вне выводимого блока, блок исчезает. Можно как то убрать это?
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;
Хотелось бы что бы скрипт реагировал только на кнопки. |
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>
|
рони, большое спасибо!
|
| Часовой пояс GMT +3, время: 09:20. |