02.08.2018, 21:02
|
|
Интересующийся
|
|
Регистрация: 12.08.2010
Сообщений: 14
|
|
|
открытие div и смена текста в a (ссылка)
Доброго времени суток. Подскажите, плиз, что я не так в этом коде написала. Т.е. мне хотелось бы, что при нажатии на ссылку открывался div и менялся текст ссылки, а при повторном нажатии div закрывался и текст ссылки менялся на обратный. Но смена текста ссылки не происходит ((((. Мне кажется, что я как-то неправильно toggler указываю, но не могу понять, как скрипту сказать, чтобы он к ссылке это применял.
<script type="text/javascript">
function showHide(element_id) {
var obj = document.getElementById(element_id);
if (document.getElementById(element_id)) {
if (obj.style.display != "block") {
obj.style.display = "block";
toggler.innerHTML = 'Закрыть'; return
}
else obj.style.display = "none";
toggler.innerHTML = 'Открыть';
}
else alert("Элемент с id: " + element_id + " не найден!");
}
</script>
<a href="javascript:void(0)" onclick="showHide('block_id');return false;" id="toggler">Открыть</a><br/><br/>
<div id="block_id" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<a href="javascript:void(0)" onclick="showHide('block_id_2');return false;" id="toggler">Открыть</a><br/><br/>
<div id="block_id_2" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
Спасибо за внимание.
|
|
02.08.2018, 21:43
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
rognarek,
id уникально!!!
|
|
02.08.2018, 22:03
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
У вас не указан toggler, у каждого блока должен быть свой.
<html>
<head>
<meta charset="utf-8">
<style>
hr {
all: unset;
height: 30px;
display: block;
}
</style>
</head>
<body>
<a href="javascript:void(0)" onclick="showHide('block_id','toggler_1');return false;" id="toggler_1">Открыть</a>
<div id="block_id" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<hr>
<a href="javascript:void(0)" onclick="showHide('block_id_2','toggler_2');return false;" id="toggler_2">Открыть</a>
<div id="block_id_2" style="display: none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<script>
function showHide(element_id, toggler_id) {
var obj = document.getElementById(element_id);
var toggler = document.getElementById(toggler_id);
if(document.getElementById(element_id)) {
if(obj.style.display != "block") {
obj.style.display = "block";
toggler.innerHTML = 'Закрыть';
return;
} else
obj.style.display = "none";
toggler.innerHTML = 'Открыть';
} else
alert("Элемент с id: " + element_id + " не найден!");
}
</script>
</body>
</html>
Немного о том, как можно упростить. Ведь когда будет много таких блоков, это будет сложно поддерживать. В спецификации HTML 5.2 определён элемент details, который представляет собой раскрывающийся виджет, из которого пользователь может получить дополнительную информацию или элементы управления.
Ваш пример с элементом details:
<html>
<head>
<meta charset="utf-8">
<style>
summary::after {
content: "Открыть";
}
details {
margin-bottom: 30px;
}
details[open] summary::after {
content: "Закрыть";
}
</style>
</head>
<body>
<details>
<summary></summary>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</details>
<details>
<summary></summary>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</details>
</body>
</html>
ОСТОРОЖНО! Первый пример содержит неправильное использование элемента HTML, а именно ссылки (элемент A). Текст ссылки гласит ― Открыть, что может ввести пользователя в заблуждение. И действительно, пользователь видит перед собой ссылку, он может её перетащить в другое окно, добавить в закладки, в контекстном меню выбрать Открыть в новой вкладке, однако его действия завершатся неудачей, поскольку будет открыта пустая вкладка.
В таком случае лучше использовать кнопку (элемент BUTTON)
Последний раз редактировалось Malleys, 02.08.2018 в 22:30.
Причина: Добавлено предостережение, почему не стоит использовать ссылку там, где можно использовать кнопку
|
|
02.08.2018, 22:38
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
rognarek,
если блок сразу после кнопки
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div.block{
display: none;
}
.open + div.block {
display: block;
}
.toggler{
margin-bottom: 12px;
display: block;
}
.toggler:after{
content: "Открыть";
}
.toggler.open:after{
content: "Закрыть";
}
</style>
<script>
function showHide(elem)
{
elem.classList.toggle("open")
}
</script>
</head>
<body>
<BUTTON onclick="showHide(this)" class="toggler"></BUTTON>
<div class="block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<BUTTON onclick="showHide(this)" class="toggler"></BUTTON>
<div class="block">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</body>
</html>
Последний раз редактировалось рони, 03.08.2018 в 00:13.
|
|
02.08.2018, 23:58
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<button>открыть</button>
<div class="block" style="display:none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<br>
<button>открыть</button>
<div class="block" style="display:none;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<script>
var block = document.querySelectorAll('.block');
document.querySelectorAll('button').forEach((el,i)=>el.onclick=e=>{
var text = el.textContent;
el.textContent = text == 'открыть'?'закрыть':'открыть';
block[i].style.display = text == 'открыть'?'block':'none';
});
</script>
Последний раз редактировалось j0hnik, 03.08.2018 в 00:13.
Причина: Заменил, только не ругайтесь пожалуйста
|
|
03.08.2018, 07:01
|
|
Интересующийся
|
|
Регистрация: 12.08.2010
Сообщений: 14
|
|
Спасибо всем большое! 
Сообщение от Malleys
|
|
У вас не указан toggler, у каждого блока должен быть свой.
|
вот балда, размножила ссылки и забыла про id. Спасибо большое!
|
Сообщение от Malleys
|
|
Немного о том, как можно упростить. Ведь когда будет много таких блоков, это будет сложно поддерживать. В спецификации HTML 5.2 определён элемент details, который представляет собой раскрывающийся виджет, из которого пользователь может получить дополнительную информацию или элементы управления.
|
Это замечательный виджет, читала о нем, но у меня появляющийся блок будет перед ссылкой. Это я тут так написала, чтобы легче смотрелось
|
Сообщение от Malleys
|
|
ОСТОРОЖНО! Первый пример содержит неправильное использование элемента HTML, а именно ссылки (элемент A). Текст ссылки гласит ― Открыть, что может ввести пользователя в заблуждение. И действительно, пользователь видит перед собой ссылку, он может её перетащить в другое окно, добавить в закладки, в контекстном меню выбрать Открыть в новой вкладке, однако его действия завершатся неудачей, поскольку будет открыта пустая вкладка.
|
Спасибо за информацию, сделаю тогда "подробнее" и "скрыть".
|
|
03.08.2018, 07:10
|
|
Интересующийся
|
|
Регистрация: 12.08.2010
Сообщений: 14
|
|
|
Подскажите еще плиз, это уже просто для интереса, если я захочу, чтобы другие открытые блоки скрывались, когда я нажимаю на открыть для скрытого блока, мне надо уже цикл прописывать, чтобы проверка шла?
|
|
03.08.2018, 12:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
|
Сообщение от rognarek
|
|
просто для интереса, если я захочу, чтобы другие открытые блоки скрывались
|
400!!! четыреста вариантов на форуме!!! ключевое слово: открывашка |
|
03.08.2018, 13:27
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
rognarek,
мой пост посмотрите, блоков можно вставить сколько угодно
|
|
03.08.2018, 14:50
|
|
Интересующийся
|
|
Регистрация: 12.08.2010
Сообщений: 14
|
|
|
Хорошо, спасибо.
|
|
|
|
