Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > Общие вопросы Web
Регистрация

Восстановить пароль
Повторная активизация e-mail


Ответ
 
Опции темы
Старый 03.06.2018, 18:32   #1
alex0097
Форумчанин
 
Аватар для alex0097
 
Регистрация: 06.07.2010
Сообщений: 118
Репутация: 21
По умолчанию Сворачивание и разворачивание текста

Всем привет. Подскажите как реализовать сворачивание текста, если нажал на другое разворачивание

Код:

<script type="text/javascript">
     function showhide(id) {
       	var e = document.getElementById(id);
       	e.style.display = (e.style.display == 'block') ? 'none' : 'block';
		
     }
    
    </script>



 <li><a href="javascript:showhide('Opisanie')">Описание</a></li>
      <li><a href="javascript:showhide('Opcii')">Опции</a></li>
      <li><a href="javascript:showhide('dop')">Дополнительно</a></li>
      <li><a href="javascript:showhide('Zamer')">Замер</a></li>

<div id="Opisanie" style="display:none;">
  <br>
		<br>
	<p> 111111</p>
</div>


<div id="Opcii" style="display:none;" >
  <br>
		<br>
	<p> 222222</p>
</div>


<div id="dop" style="display:none;">
  <br>
		<br>
	<p> 33333333</p>
</div>



<div id="Zamer" style="display:none;">
  <br>
		<br>
	<p> 44444444</p>
</div>

alex0097 вне форума   Ответить с цитированием
Старый 03.06.2018, 22:40   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,694
Репутация: 2127
По умолчанию

У меня крайне смешанные чувства по поводу этого кода. С одной стороны, там юзается тернарный оператор, который нуб или дурак написать не может; с другой — срётся с высокой колокольни на все принципы программирования, используются даже древний метод запуска JS, через псевдо-протокол, который я последний раз видел лет 10 назад... Форматирование верстки — отдельный кадр! Ладно, хоть тут оно не капсом!
Фу!

По делу: создай список всех, кого тебе надо открывать/закрывать и закрывай тех, кого не выбрали в этот раз. Но ФУ на такой код!
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 08.06.2018, 02:43   #3
Julik2
Пользователь
 
Регистрация: 06.06.2018
Сообщений: 26
Репутация: 10
По умолчанию

Создайте глобальную переменную, в которую записывайте разворачиваемого ID.
Добавьте в начало функции проверку существования развёрнутого ранее блока и соответственно сворачивание.
__________________
(O|O)
Julik2 вне форума   Ответить с цитированием
Старый 09.06.2018, 00:41   #4
Ottava
Форумчанин
 
Регистрация: 05.09.2017
Сообщений: 105
Репутация: 121
По умолчанию

Цитата:
Сообщение от alex0097 Посмотреть сообщение
Подскажите как реализовать сворачивание текста, если нажал на другое разворачивание
Всем div-ам прописываете классы, например 'hide_show hide' и убираете style="display:none;". id="..." тоже можно убрать, они не нужны:

Код:

<div class='hide_show hide'>
. . .
</div>

<div class='hide_show hide'>
. . .
</div>

В файле CSS-стилей добавляете:
Код:

.hide {style="display:none;"}

И задействуете селектор классов, можно на чистом Javascript, но лучше на jquery, что-то типа такого:
Код:

$(document).ready(function () {
       $('div.hide_show').on('click', function() {  // Вешаем обработчик onClick на все <div class='hide_show'
          $('div.hide_show').addClass('hide');      // Скрываем все <div class='hide_show', встроенный цикл jquery
          $(this).removeClass('hide');              // Открываем кликнутый <div class='hide_show'
          });
    }

Осталось придумать, куда вы собираетесь кликать, ведь все <div class='hide_show'> у вас - исходно скрыты Не знаю как у вас задумано, но скорее всего надо внутрь каждого <div class='hide_show' вставлять внутренний <div>, содержимое которого уже скрывать по клику на родительский <div class='hide_show'. Тогда содержимое функции чуть изменится:
Код:

   $('div.hide_show >div').addClass('hide');    // Скрываем все дочерние <div в <div class='hide_show', встроенный цикл jquery
   $(this).children('div').removeClass('hide');        // Открываем дочерний <div от кликнутого <div class='hide_show'


и надо в CSS прописать какие-нибудь стили для <div class='hide_show'>, чтобы он был виден и имел какую-нибудь высоту/ширину для клика мышкой.

PS: Скрипты я не отлаживал, ибо неизвестна реальная html-структура на что вы собираетесь кликать, когда <div> скрыт.
Плюс, проще задействовать анимацию jquery и сделать плавное скрытие/показ.

Последний раз редактировалось Ottava; 09.06.2018 в 01:07.
Ottava вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать сворачивание и разворачивание блока с элементами ко кликам? lucky20071 JavaScript, Ajax 2 07.06.2017 12:38
Сворачивание/разворачивание формы из панели задач Dennis777 Общие вопросы Delphi 2 11.04.2014 16:52
Сворачивание и разворачивание makar3000 JavaScript, Ajax 2 06.01.2011 14:51
Сворачивание,разворачивание формы (SC_MINIMIZE,SC_MAXIMIZE) Dj_SheLL Помощь студентам 2 30.04.2010 15:45
Разворачивание/сворачивание данных на защищенном листе Wespe Microsoft Office Excel 12 02.02.2010 13:11


12:09.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru