Помогите упростить код открывания панелей
Ребят, подскажите, пожалуйста.
Необходимо при клике на ссылку "а,б" открыть соответствующую панель. И затемнить экран. Закрытие этой панели происходит по кресту внутри нее и по затемнению. Написал вот такой код <div class="body-close"></div> <div class="panel-a-url">открыть панель а</div> <div class="#panel-a"><i class="panel-close">x</i>содержимое панели а</div> <div class="panel-b-url">открыть панель б</div> <div class="#panel-b"><i class="panel-close">x</i>содержимое панели б</div> ...
$("#body-close, .panel-close").click(function() {
$("#body-close").fadeOut(500);
$("html, body, #panel-a, #panel-b").removeClass("open");
})
$("#panel-a-url, #panel-b-url").click(function() {
$("html").addClass("open");
$("body").addClass("open");
$("#body-close").fadeIn(500);
})
$("#panel-a-url").click(function() {
$("#panel-a").addClass("open");
})
$("#panel-b-url").click(function() {
$("#panel-b").addClass("open");
})
Все бы хорошо, но вот таких панелей у меня будет штук 15... Подскажите, пожалуйста, как можно упростить мою писанину? |
Anrew,
не использовать id и поискать нужную "открывашка" из более 200 на форуме http://javascript.ru/forum/dom-windo...tml#post385057 |
Спасибо, рони. Это то что нужно.
Хотел плюс в карму поставить, но пишут - "нужно оставить отзыв кому-то ещё"... |
Рано радовался. На компе все отлично работает, но на мобиле некоторые блоки не открываются. И после этого перестают открываться даже те, которые открывались)))
И еще, на сайте есть несколько ссылок, при клике на которые открывается один и тот же блок, только контент меняется средством javascript. Т.е. кол-во ссылок не равно кол-ву блоков. В таком случае это скрипт закрытие блока по нажатию в любом месте открывает совсем не тот блок... Наимудрейший Рони, подскажите, пожалуйста, за счет чего происходит в этом скрипте связь ссылки с блоком? |
Цитата:
как оно у вас неизвестно, попробуте сделать макет и описание |
<div class="over">затемнение</div> <div id="url1" class="url">ссылка1<div> <div id="block1" class="block"><i>х</i></div> <div id="url2" class="url">ссылка1<div> <div id="block2" class="block"><i>х</i></div> <div id="url3" class="url">ссылка1<div> <div id="url4" class="url">ссылка1<div> <div id="block3-4" class="block"><i>х</i></div> <div id="url5" class="url">ссылка1<div> Задача: при клике на ссылку открыть соответствующий блок и добавить класс к html. Закрытие должно происходить на крест и в не области блока. Вот для такого случая существует открывашка? Весь форум перерыл. Искал и открывашка и закрывашка...))) Здесь особенность в том, что есть непарные ссылки и блоки - ссылка 3 и 4 открывает один блок с разным контентом внутри. А у ссылки 5 (в некоторых случаях) нет блока и она скрыта display: none... |
Цитата:
|
Цитата:
При клике на одну ссылку в блок подставляется один контент, при клике на другую - другой. Да это и не особо важно. Я просто написал, чтобы вопросов не было - "зачем тебе разные ссылки на однин блок..." и т.д. |
Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html,body{margin:0;min-height:100%}
.url{cursor:pointer}
.block{display:none;width:300px;height:200px;line-height:200px;position:fixed;top:50%;left:50%;margin-top:-100px;margin-left:-150px;background:#E99B63;border-radius:5px;text-align:center;z-index:11}
.block.open{display:block}
.close{display:inline-block;float:right;line-height:10px;margin-right:12px;margin-top:12px;cursor:pointer;padding:4px;background:#FF0;border-radius:50%}
.over{display:none}
.over.open{display:block;position:absolute;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5);z-index:10}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var d = $(".url"),
b = $(".block"),
c = $(".over");
d.click(function() {
var a = $(this).data("block");
a && (b.not(a).removeClass("open"), $(a).toggleClass("open"), c.toggleClass("open", $(".open").length))
});
$("html").click(function(a) {
$(a.target).closest(".block, .url").length && !$(a.target).is(".close") || b.add(c).removeClass("open")
})
});
</script>
</head>
<body>
<div class="over"></div>
<div id="url1" class="url" data-block="#block1">ссылка1</div>
<div id="block1" class="block">блок 1<i class="close">х</i></div>
<div id="url2" class="url" data-block="#block2">ссылка2</div>
<div id="block2" class="block">блок 2<i class="close">х</i></div>
<div id="url3" class="url" data-block="#block3-4">ссылка3-4</div>
<div id="url4" class="url" data-block="#block3-4">ссылка3-4</div>
<div id="block3-4" class="block" >блок 3-4<i class="close">х</i></div>
<div id="url5" class="url">ссылка1</div>
</body>
</html>
|
Это то, что я ищу уже 2 дня))
Разжевали и в рот положили))) Спасибо большое. |
Наимудрейший рони,
подскажите, пожалуйста - перелопатил все открывашки/закрывашки, но не получается реализовать это: Необходимо удалить(закрыть) блок на кнопку "удалить" и удалить все блоки, нажав на кнопку "удалить все" Блоков будет "n" число:
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;}
</style>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" onclick="viewed.remove('<?php echo $var; ?>');">удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
Точнее получается, но как всегда через ж)) с помощью i++ блокам применяю уникальный id и ... вообщем через ж...) Подскажите, пожалуйста - как можно проще все это реализовать? |
Anrew,
удалить? или скрыть? |
Лучше удалить)) Но можно и в display:none
|
Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;}
</style>
<script>
window.addEventListener('DOMContentLoaded', function() {
var delites = document.querySelectorAll('.delite'),
alldelite = document.querySelector('.alldelite');
[].forEach.call(delites, function(item) {
item.addEventListener('click', function() {
var body = document.querySelector('body');
body.removeChild(this.parentNode)
});
});
alldelite.addEventListener('click', function () {
[].forEach.call( document.querySelectorAll('.delite'), function(button) {
button.click()
});
});
});
</script>
</head>
<body>
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</body>
</html>
|
Огромное спасибо)) Очень помогли.
|
Рано радовался) На свою голову упростил верстку, а оказалось зря. Если все эти блоки будут обернуты в дивы, то скрипт выдает ошибку "Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node."
Вот, например, так уже не работает: <div class="top"> <div class="div"> <button type="button" class="delite" >удалить</button> 1</div> <div class="div"> <button type="button" class="delite" >удалить</button> 2</div> <div class="div"> <button type="button" class="delite" >удалить</button> 3</div> <button type="button" class="alldelite">удалить все</button> </div> А таких оберток будет много Рони, подскажите, пожалуйста - как в таком случае код должен выглядеть? |
Anrew,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.div {
background: yellow;
width: 100px;
height: 100px;
float: left;
margin-right: 10px;
}
.top{
height: 150px;
border: 2px solid #191970;
padding: 10px;
margin: 50px;
}
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
var c = document.querySelectorAll(".delite"),
d = document.querySelectorAll(".alldelite");
[].forEach.call(c, function(a) {
a.addEventListener("click", function() {
var b = a.parentNode;
b.parentNode.removeChild(b)
})
});
[].forEach.call(d, function(a) {
a.addEventListener("click", function() {
var b = a.parentNode.querySelectorAll(".delite");
[].forEach.call(b, function(a) {
a.click()
})
})
})
});
</script>
</head>
<body>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
<div class="top">
<div class="div">
<button type="button" class="delite" >удалить</button>
1</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
2</div>
<div class="div">
<button type="button" class="delite" >удалить</button>
3</div>
<button type="button" class="alldelite">удалить все</button>
</div>
</body>
</html>
|
Это то что нужно. Огромное человеческое СПАСИБО))
|
Anrew,
скрпируйте скрипт по новой, немного уточнил. строка 35 |
| Часовой пояс GMT +3, время: 05:19. |