Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.08.2018, 21:02
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 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>


Спасибо за внимание.
Ответить с цитированием
  #2 (permalink)  
Старый 02.08.2018, 21:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

rognarek,
id уникально!!!
Ответить с цитированием
  #3 (permalink)  
Старый 02.08.2018, 22:03
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 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. Причина: Добавлено предостережение, почему не стоит использовать ссылку там, где можно использовать кнопку
Ответить с цитированием
  #4 (permalink)  
Старый 02.08.2018, 22:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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.
Ответить с цитированием
  #5 (permalink)  
Старый 02.08.2018, 23:58
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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. Причина: Заменил, только не ругайтесь пожалуйста
Ответить с цитированием
  #6 (permalink)  
Старый 03.08.2018, 07:01
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

Спасибо всем большое!

Сообщение от Malleys Посмотреть сообщение
У вас не указан toggler, у каждого блока должен быть свой.
вот балда, размножила ссылки и забыла про id. Спасибо большое!


Сообщение от Malleys Посмотреть сообщение
Немного о том, как можно упростить. Ведь когда будет много таких блоков, это будет сложно поддерживать. В спецификации HTML 5.2 определён элемент details, который представляет собой раскрывающийся виджет, из которого пользователь может получить дополнительную информацию или элементы управления.
Это замечательный виджет, читала о нем, но у меня появляющийся блок будет перед ссылкой. Это я тут так написала, чтобы легче смотрелось


Сообщение от Malleys Посмотреть сообщение
ОСТОРОЖНО! Первый пример содержит неправильное использование элемента HTML, а именно ссылки (элемент A). Текст ссылки гласит ― Открыть, что может ввести пользователя в заблуждение. И действительно, пользователь видит перед собой ссылку, он может её перетащить в другое окно, добавить в закладки, в контекстном меню выбрать Открыть в новой вкладке, однако его действия завершатся неудачей, поскольку будет открыта пустая вкладка.
Спасибо за информацию, сделаю тогда "подробнее" и "скрыть".
Ответить с цитированием
  #7 (permalink)  
Старый 03.08.2018, 07:10
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

Подскажите еще плиз, это уже просто для интереса, если я захочу, чтобы другие открытые блоки скрывались, когда я нажимаю на открыть для скрытого блока, мне надо уже цикл прописывать, чтобы проверка шла?
Ответить с цитированием
  #8 (permalink)  
Старый 03.08.2018, 12:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от rognarek
просто для интереса, если я захочу, чтобы другие открытые блоки скрывались
400!!! четыреста вариантов на форуме!!! ключевое слово: открывашка
Ответить с цитированием
  #9 (permalink)  
Старый 03.08.2018, 13:27
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

rognarek,
мой пост посмотрите, блоков можно вставить сколько угодно
Ответить с цитированием
  #10 (permalink)  
Старый 03.08.2018, 14:50
Интересующийся
Отправить личное сообщение для rognarek Посмотреть профиль Найти все сообщения от rognarek
 
Регистрация: 12.08.2010
Сообщений: 14

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


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При клике на ссылку смена класса соседнего DIV arborik jQuery 2 23.07.2014 01:00
смена div блока при наведении курсора мыши Денис2201 Общие вопросы Javascript 3 07.10.2013 13:43
Смена background у div AlexMak Общие вопросы Javascript 11 17.05.2012 14:34
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58
Смена цвета текста rider-sx Общие вопросы Javascript 7 16.09.2008 18:05