Нужна помощь с несложным скриптом.
$(document).ready(function() {
window.onload= function() {
document.getElementById('toggler').onclick = function() {
openbox('box', this);
return false;
};
};
function openbox(id, toggler) {
var div = document.getElementById(id);
if(div.style.display == 'block') {
div.style.display = 'none';
}
else {
div.style.display = 'block';
}
}
});
<a id="toggler" href="#">Открыть</a> <div id="box" style="display: none;">Отображаемый блок</div> как сделать что бы примерная конструкция работала для многих элементов на странице?, а не только для одного |
Argeares,
форум-поиск-открывашка |
помогите именно с таким примером, был бы очень признателен.
пробую много открывашек. и ни одна не подходит. эта подходит, только она для одного елемента, а нужно для многих. |
Argeares,
id уникально!!! нужны классы |
когда делаю классы не работает.
покажите пожалуйста. я то понимаю, что такие как я вас уже достали.) |
Argeares,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box {
height: 300px;color:#fff;
width: 200px;
background: black;
display: none;
}
.toggler {
background: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.toggler').click(function(event) {
event.preventDefault()
var i = $('.toggler').index(this)
$('.box').eq(i).stop().slideToggle();
});
}); </script>
</head>
<body>
<a class="toggler" href="#">Открыть</a>
<div class="box" >Отображаемый блок</div>
<br>
<a class="toggler" href="#">Открыть</a>
<div class="box" >Отображаемый блок</div> <br>
<a class="card__whoop toggler" href="#">Открыть</a>
<div class="whoop_pop box">
<form>
<p>Сообщить об ошибке</p>
<a href="#">Неправильно указана начальная цена</a>
<a href="#">Цена не обновляется у товара</a>
<a href="#">Неправильно указан товар</a>
<a href="#">Другая причина (написать причину)</a>
<textarea></textarea>
<button>Отправить</button>
</form>
</div>
</body>
</html>
|
что то не работает у меня. смотрите мой код.
$(document).ready(function() {
$(function() {
$('.toggler').click(function(event) {
event.preventDefault()
var i = $('.toggler').index(this)
$('.box').eq(i).stop().slideToggle();
});
});
});
<a class="card__whoop toggler" href="#"></a>
<div class="whoop_pop box">
<form>
<p>Сообщить об ошибке</p>
<a href="#">Неправильно указана начальная цена</a>
<a href="#">Цена не обновляется у товара</a>
<a href="#">Неправильно указан товар</a>
<a href="#">Другая причина (написать причину)</a>
<textarea></textarea>
<button>Отправить</button>
</form>
</div>
в css дисплей ноне стоит. и оно как бы всплывает но почему то невидимое. |
Argeares,
смотрите пост№6 добавил ваш код |
Argeares,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.box {
display: none;
}
.toggler {
background: red;
}
.box.open{
display: block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.toggler').click(function(event) {
event.preventDefault()
var i = $('.toggler').index(this)
$('.box').eq(i).toggleClass('open');
});
}); </script>
</head>
<body>
<a class="toggler" href="#">Открыть</a>
<div class="box" >Отображаемый блок</div>
<br>
<a class="toggler" href="#">Открыть</a>
<div class="box" >Отображаемый блок</div> <br>
<a class="card__whoop toggler" href="#">Открыть</a>
<div class="whoop_pop box">
<form>
<p>Сообщить об ошибке</p>
<a href="#">Неправильно указана начальная цена</a>
<a href="#">Цена не обновляется у товара</a>
<a href="#">Неправильно указан товар</a>
<a href="#">Другая причина (написать причину)</a>
<textarea></textarea>
<button>Отправить</button>
</form>
</div>
</body>
</html>
|
спасибо) разобрался. класс бокс просто уже использовался в коде.
|
| Часовой пояс GMT +3, время: 00:58. |