Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2014, 22:40
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Раскрывающийся и сворачивающийся по клику div
Добрый вечер! Прошу найти решение задачи.

Есть несколько div, при клике на которые разворачивается скрытый текст:

<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#></a>
<div class="hide">Спрятанный текст</div>
</div>


$(document).ready(function(){                                                  
    $('.view-source .hide').hide();
    $('.view-source a').toggle(
      function(){
        $(this).siblings('.hide').stop(false, true).slideDown(500);
      },
     function(){
        $(this).siblings('.hide').stop(false, true).slideUp(500);
     }
   );
});


Как сделать так, чтобы развернутый div сворачивался при клике на любой из других div'ов - оберток (с классом view-source)? То есть, на один момент времени должен быть открыт только 1 скрытый div.
Ответить с цитированием
  #2 (permalink)  
Старый 24.04.2014, 05:05
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Кавычки у атрибутов надо закрывать...
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">111</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">222</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">333</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(document).ready(function(){                                                  
    $('.view-source .hide').hide();
    $('.view-source a').on('click', function() {
      $('.view-source .hide').slideUp(500);
      $(this).parent().find('.hide').slideDown(500);
    });
});
</script>

  </body>
</html>

Последний раз редактировалось jsnb, 24.04.2014 в 05:12.
Ответить с цитированием
  #3 (permalink)  
Старый 24.04.2014, 08:19
Интересующийся
Отправить личное сообщение для kefalia Посмотреть профиль Найти все сообщения от kefalia
 
Регистрация: 16.12.2013
Сообщений: 21

Спасибо!
Ответить с цитированием
  #4 (permalink)  
Старый 24.04.2014, 08:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,178

jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ...

Вариант
<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
<div class="view-source">
  <a href="#">111</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">222</a>
  <div class="hide">Спрятанный текст</div>
</div>
<div class="view-source">
  <a href="#">333</a>
  <div class="hide">Спрятанный текст</div>
</div>

<script>
$(function(){
    $('.view-source .hide').hide();
    $a = $('.view-source a');
    $a.on('click', function(event) {
      event.preventDefault();
      $a.not(this).next().slideUp(500);
      $(this).next().slideToggle(500);
    });
});
</script>

  </body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 24.04.2014, 11:23
Профессор
Отправить личное сообщение для jsnb Посмотреть профиль Найти все сообщения от jsnb
 
Регистрация: 15.03.2014
Сообщений: 561

Сообщение от рони Посмотреть сообщение
jsnb,
нажмите 111 второй раз или поместите дивы в конец длинной страницы ...
Да, спасибо за замечание.
Ответить с цитированием
  #6 (permalink)  
Старый 25.04.2016, 14:44
Новичок на форуме
Отправить личное сообщение для Александр77 Посмотреть профиль Найти все сообщения от Александр77
 
Регистрация: 25.04.2016
Сообщений: 3

Перекидывает на самый верх сайта
Здравствуйте, сделал отдельно все работает. Переношу на сайт, при нажатии выбрасывает на верх страницы и div не раскрывается. Думаю дело в ссылке "#" может можно чем-то заменить.Спасибо!
Ответить с цитированием
  #7 (permalink)  
Старый 25.04.2016, 15:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,178

Александр77,
может забыли
function(event) {
event.preventDefault(); добавить?
Ответить с цитированием
  #8 (permalink)  
Старый 25.04.2016, 16:35
Новичок на форуме
Отправить личное сообщение для Александр77 Посмотреть профиль Найти все сообщения от Александр77
 
Регистрация: 25.04.2016
Сообщений: 3

не работает код
проблема в том что у меня на этой странице подключен слайдер и когда я подключаю библиотеку слайдер перестает работать
Ответить с цитированием
  #9 (permalink)  
Старый 25.04.2016, 16:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,178

Александр77,
ненадо грузить много версий jquery достаточно одной
Ответить с цитированием
  #10 (permalink)  
Старый 25.04.2016, 16:46
Новичок на форуме
Отправить личное сообщение для Александр77 Посмотреть профиль Найти все сообщения от Александр77
 
Регистрация: 25.04.2016
Сообщений: 3

я их заменил и слайдер перестал работать? с чем это может быть связанно
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не заменяется содержимое DIV по клику. Помогите разобраться. r4zoom Элементы интерфейса 4 04.09.2013 15:54
раскрывающийся и закрывающися текст при клику hardware jQuery 4 19.08.2013 15:16
Проблемы с div обновлённым через (#id).load erlcat jQuery 4 03.03.2013 01:41
Как переписать div по клику по нему Lewik Общие вопросы Javascript 3 08.05.2012 21:27
Изменение содержимого div по клику и передача данных POST Serious2008 Общие вопросы Javascript 3 13.11.2011 18:12