Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

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

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

Код:
<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, 21:40   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

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

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

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

Цитата:
Сообщение от 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 и сделать плавное скрытие/показ.
Безопасность с Content Security Policy

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

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


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