Поочередное открытие/закрытие div

@anton_bytsko · Регистрация: 08.07.2016

Студворк — интернет-сервис помощи студентам

Ребята, помогите пожалуйста: в предоставленном примере блоки param_list открываются, но при открытии второго, первый не скрывается, в итоге одновременно можно открыть все.

Подскажите пожалуйста, как изменить JS, чтобы при открытии следующего блока предыдущий скрывался.

Заранее большущее Вам спасибо!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div class="filter-wrap>
   <div class="param">
   <span class="param_title">Цвет</span>
   <div class="param_list" style="display:none;z-index:999;">
      <ul class="ul-property">
         <li class="li-property">
            <a href="#" class="a-property">Синий</a>
            <a href="#" class="a-property">Красный</a>
            <input name="characteristics[]" type="hidden" value="" />
         </li>
      </ul>
   </div>
</div>
</div>
<div class="filter-wrap>
   <div class="param">
   <span class="param_title">Модель</span>
   <div class="param_list" style="display:none;z-index:999;">
      <ul class="ul-property">
         <li class="li-property">
            <a href="#" class="a-property">iPhone 6</a>
            <a href="#" class="a-property">iPhone 5</a>
            <input name="characteristics[]" type="hidden" value="" />
         </li>
      </ul>
   </div>
</div>
</div>

JavaScript
1
2
3
4
$('.param').click(function () {
$(this).find('.param_list').toggleClass('open');
$('.param_list').click(function(){return false;});
});

@sad67man · 08.07.2016, 16:48

anton_bytsko, https://jsfiddle.net/61ngc84b/

JavaScript
1
2
3
4
$('.param').click(function() {
  $(this).find('.param_list').slideToggle();
  $(".filter-wrap .param").not($(this)).find('.param_list').slideUp();
});

@anton_bytsko · 08.07.2016, 17:23 **[ТС]**

Спасибо Вам большущее, все работает, очень выручили!

@sad67man · 08.07.2016, 17:28

anton_bytsko, Небольшая правочка. Нужно событие вешать не на весь блок иначе будет скрываться, при клике в открывшемся блоке

JavaScript
1
2
3
4
5
$('.param .param_title').click(function() {
    var parent = $(this).parent();
  parent.find('.param_list').slideToggle();
  $(".filter-wrap .param").not(parent).find('.param_list').slideUp();
});

https://jsfiddle.net/61ngc84b/1/

@anton_bytsko · 08.07.2016, 18:13 **[ТС]**

Огромное спасибо, внес правки.

Добавлено через 37 минут
Подскажите еще пожалуйста, есть ли возможность, дополнительно, добавить функцию, чтобы блок скрывался при клике вне области?

Заранее большущее спасибо!

@sad67man · 08.07.2016, 19:14

https://jsfiddle.net/61ngc84b/3/

JavaScript
1
2
3
4
5
6
7
8
9
$('.param .param_title').click(function() {
    var parent = $(this).parent();
  parent.addClass("active").find('.param_list').slideToggle();
  $(".filter-wrap .param.active").not(parent).find('.param_list').removeClass("active").slideUp();
});
$(document).click(function(e){
    if(!$(e.target).closest(".param.active").length)
      $(".filter-wrap .param.active").removeClass("active").find('.param_list').slideUp();
})

@anton_bytsko · 08.07.2016, 19:29 **[ТС]**

Даа, спасибо огроменное, теперь все здорово! Очень выручили!

@sad67man · 08.07.2016, 20:47

anton_bytsko, Вообще мой последний код не очень корректный. Так будет правильней.
https://jsfiddle.net/61ngc84b/5/

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.param .param_title').click(function() {
    var parent = $(this).parent();
  parent.addClass("active").find('.param_list').slideToggle();
  var close = function(e){
    if(!$(e.target).closest(parent).length){
        parent.find('.param_list').slideUp();
        $(document).unbind("click", close)
    }
  }
  $(document).bind("click", close)
});

Добавлено через 11 минут
anton_bytsko, И еще один момент. не успел отредактировать, если быстро кликать по одному заголовку, то блок будет плясать. Особенно если после череды кликов мы сделаем еще череду кликов по другому заголовку, тогда вообще танцы. Нужно останавливать анимацию через метод .stop()

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.param .param_title').click(function() {
    var parent = $(this).parent();
  parent.addClass("active").find('.param_list').stop().slideToggle();
  var close = function(e){
    if(!$(e.target).closest(parent).length){
        parent.find('.param_list').stop().slideUp();
        $(document).unbind("click", close)
    }
  }
  $(document).bind("click", close)
});

Думаю это уже окончательный вариант) Пятница вечер, мозг уже устал)
https://jsfiddle.net/61ngc84b/6/

Добавлено через 14 минут
Да и .addClass("active") получается лишний.

@Fedor Vlasenko · 08.07.2016, 21:10

Решение без jQuery выгледело бы так

JavaScript
1
2
3
4
5
6
7
8
9
10
11
document.onclick = function (e) {
    var el = e ? e.target :  window.event.srcElement,
        active = this.querySelector('.size'),
        elCls;
    while (el != this) {
        elCls = el.className;
        elCls == 'float' && (el.className += ' size') || elCls == 'float size' && (el.className = 'float');
        el = el.parentNode || el.parentElement;
    }
    active && (active.className = 'float');
};

Песочница

@anton_bytsko · 08.07.2016, 21:27 **[ТС]**

Ребята, всем большое пребольшое спасибо!

Я также немного изменил код, на основании первого кода в сообщении от доброго sad67man 20:47, как раз необходимо было без анимации, уже не стал беспокоить по этому поводу, мне необходимо было имитировать select

Вроде правильно, все работает:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
 $('.param .param_title').click(function() {
    var parent = $(this).parent();
  parent.find('.param_list').toggleClass('open');
  var close = function(e){
    if(!$(e.target).closest(parent).length){
        parent.find('.param_list').removeClass('open');
        $(document).unbind("click", close)
    }
  }
  $(document).bind("click", close)
}); 
});

@sad67man · 08.07.2016, 22:54

Не по теме:

anton_bytsko, Так бы сразу и сказали, что имитируете селект. Тут больше упор на css идет, чем на js. Вот от делать нечего накидал примерчик.
https://jsfiddle.net/61ngc84b/9/
Не хочу сюда код выкладывать :-[

@BANO · 09.07.2016, 00:30

Комментарий модератора

Сообщение от sad67man

Не хочу сюда код выкладывать

Нарушение пункта правил 4.11
Выложите по-хорошему

@Дмитрий Дмитрий · 14.01.2018, 09:16

Подскажите, в этом посте открывается div внутри div, а как открыть/закрыть div вне div

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
   <div class="param">
   <span class="param_title">Цвет</span>
</div>
 <div class="param_list" style="display:none;z-index:999;">
      <ul class="ul-property">
         <li class="li-property">
            <a href="#" class="a-property">Синий</a>
            <a href="#" class="a-property">Красный</a>
            <input name="characteristics[]" type="hidden" value="" />
         </li>
      </ul>
   </div>
 
 
   <div class="param">
   <span class="param_title">Модель</span>
</div>
  <div class="param_list" style="display:none;z-index:999;">
      <ul class="ul-property">
         <li class="li-property">
            <a href="#" class="a-property">iPhone 6</a>
            <a href="#" class="a-property">iPhone 5</a>
            <input name="characteristics[]" type="hidden" value="" />
         </li>
      </ul>
   </div>

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@anton_bytsko 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 7
	08.07.2016, 17:23 [ТС]
	Спасибо Вам большущее, все работает, очень выручили! 0

@anton_bytsko 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 7
	08.07.2016, 18:13 [ТС]
	Огромное спасибо, внес правки. Добавлено через 37 минут Подскажите еще пожалуйста, есть ли возможность, дополнительно, добавить функцию, чтобы блок скрывался при клике вне области? Заранее большущее спасибо! 0

@anton_bytsko 0 / 0 / 0 Регистрация: 08.07.2016 Сообщений: 7
	08.07.2016, 19:29 [ТС]
	Даа, спасибо огроменное, теперь все здорово! Очень выручили! 0

@sad67man
	08.07.2016, 22:54
	Не по теме: anton_bytsko, Так бы сразу и сказали, что имитируете селект. Тут больше упор на css идет, чем на js. Вот от делать нечего накидал примерчик. https://jsfiddle.net/61ngc84b/9/ Не хочу сюда код выкладывать :-[ 0