Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.05.2018, 12:49
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Скрытие/раскрытие списка
Доброго времени суток!
На сайте присутствует фильтр.
При нажатии на кнопку "Фильтр" появляется сам фильтр со свернутыми свойствами (скрин "Свойства свернуты"). В данном списке свойство "Цена" всегда развернут - пусть так и останется.

Необходимо, чтобы при нажатии на кнопку "Фильтр" сам фильтр появлялся с развернутым свойством "Производитель". Если развернуть свойство "Цена", должно сворачиваться свойство "Производитель". Если развернуть свойство "Размер", должно сворачиваться свойство "Цвет". Т.е. должно быть развёрнуто только что-то одно из "Производитель", "Размер" и "Цвет".
Сейчас свойство разворачивается/сворачивается при нажатии на само свойство - это стандартный функционал.

В шаблоне фильтра найден код:
<div class="bx_filter_parameters_box active">
                        <span class="bx_filter_container_modef"></span>
                        <div class="bx_filter_parameters_box_title" onclick="smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
                        <div class="bx_filter_block">
                            <div class="bx_filter_parameters_box_container">
                                <div class="bx_filter_parameters_box_container_block">
                                    <div class="bx_filter_input_container">
                                        <input
                                            class="min-price"
                                            type="text"
                                            name="<?echo $arItem["VALUES"]["MIN"]["CONTROL_NAME"]?>"
                                            id="<?echo $arItem["VALUES"]["MIN"]["CONTROL_ID"]?>"
                                            value="<?echo $arItem["VALUES"]["MIN"]["HTML_VALUE"]?>"
                                            size="5"
                                            onkeyup="smartFilter.keyup(this)"
                                        />
                                    </div>
                                </div>
                                <div class="bx_filter_parameters_box_container_block">
                                    <div class="bx_filter_input_container">
                                        <input
                                            class="max-price"
                                            type="text"
                                            name="<?echo $arItem["VALUES"]["MAX"]["CONTROL_NAME"]?>"
                                            id="<?echo $arItem["VALUES"]["MAX"]["CONTROL_ID"]?>"
                                            value="<?echo $arItem["VALUES"]["MAX"]["HTML_VALUE"]?>"
                                            size="5"
                                            onkeyup="smartFilter.keyup(this)"
                                        />
                                    </div>
                                </div>
                                <div style="clear: both;"></div>
                                    <div class="bx_ui_slider_part p1"><span><?/*=$price1*/?></span></div>
                                    <div class="bx_ui_slider_part p2"><span><?/*=$price2*/?></span></div>
                                    <div class="bx_ui_slider_part p3"><span><?/*=$price3*/?></span></div>
                                    <div class="bx_ui_slider_part p4"><span><?/*=$price4*/?></span></div>
                                    <div class="bx_ui_slider_part p5"><span><?/*=$price5*/?></span></div>
 
                                    <div class="bx_ui_slider_pricebar_VD" style="left: 0;right: 0;" id="colorUnavailableActive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_pricebar_VN" style="left: 0;right: 0;" id="colorAvailableInactive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_pricebar_V"  style="left: 0;right: 0;" id="colorAvailableActive_<?/*=$key*/?>"></div>
                                    <div class="bx_ui_slider_range" id="drag_tracker_<?/*=$key*/?>"  style="left: 0%; right: 0%;">
                                        <a class="bx_ui_slider_handle left"  style="left:0;" href="javascript:void(0)" id="left_slider_<?/*=$key*/?>"></a>
                                        <a class="bx_ui_slider_handle right" style="right:0;" href="javascript:void(0)" id="right_slider_<?/*=$key*/?>"></a>
                                    </div>
                                </div>-->
                                <div style="opacity: 0;height: 1px;"></div>
                            </div>
                        </div>
                    </div>


Видимо параметр onclick="smartFilter.hideFilterProps(this)" отвечает за скрытие значений свойства:
JCSmartFilter.prototype.hideFilterProps = function(element)
{
    var easing;
    var obj = element.parentNode;
    var filterBlock = BX.findChild(obj, {className:"bx_filter_block"}, true, false);
 
    if(BX.hasClass(obj, "active"))
    {
        easing = new BX.easing({
            duration : 300,
            start : { opacity: 1,  height: filterBlock.offsetHeight },
            finish : { opacity: 0, height:0 },
            transition : BX.easing.transitions.quart,
            step : function(state){
                filterBlock.style.opacity = state.opacity;
                filterBlock.style.height = state.height + "px";
            },
            complete : function() {
                filterBlock.setAttribute("style", "");
                BX.removeClass(obj, "active");
            }
        });
        easing.animate();
    }
    else
    {
        filterBlock.style.display = "block";
        filterBlock.style.opacity = 0;
        filterBlock.style.height = "auto";
 
        var obj_children_height = filterBlock.offsetHeight;
        filterBlock.style.height = 0;
 
        easing = new BX.easing({
            duration : 300,
            start : { opacity: 0,  height: 0 },
            finish : { opacity: 1, height: obj_children_height },
            transition : BX.easing.transitions.quart,
            step : function(state){
                filterBlock.style.opacity = state.opacity;
                filterBlock.style.height = state.height + "px";
            },
            complete : function() {
            }
        });
        easing.animate();
        BX.addClass(obj, "active");
    }
};


Подскажите, пожалуйста, каким образом возможно реализовать скрытие предыдущего свойства при раскрытии другого? Спасибо.
Изображения:
Тип файла: jpg Свойства свернуты.jpg (27.6 Кб, 2 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 14:11
Профессор
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 278

Я подобной функцией пользовался, если класс объекта одинаковый, а id разные то получится. В функцию передаем id:
function show (index){
        
      $(".bx_filter_block").css({"display":"none"}).eq(index).css({"display":"inline"});

}
Ответить с цитированием
  #3 (permalink)  
Старый 21.05.2018, 07:08
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Artur_Hopf, спасибо что откликнулись )
В случае если у
<div class="bx_filter_block">
прописать
<div class="bx_filter_block" id="<?=$arItem['ID']?>" onclick="show(id)">
, то при нажатии на чекбокс закрываются все свойства (скрины "1", "2", "3").
Необходимо, чтобы при нажатии на
<div class="bx_filter_parameters_box_title"  onclick="smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
скрывался предыдущий
<div class="bx_filter_block">
Ответить с цитированием
  #4 (permalink)  
Старый 21.05.2018, 09:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Так?
<div class="bx_filter_parameters_box_title"  onclick="$('.bx_filter_block').hide();smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
Ответить с цитированием
  #5 (permalink)  
Старый 21.05.2018, 10:41
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Nexus, спасибо Вам огромное, данный вариант действительно решает задачу с закрытием предыдущего списка
При тестировании обнаружено, что открытое свойство не прокручивается к началу списка, т.е. при открытии (к примеру) "Размер", на экране видны значения с середины (скрин "Размер с середины списка"), а не начало списка (скрин "Начало списка").
Подскажите, пожалуйста, возможно ли сделать так, чтобы всегда отображался список сверху?
Изображения:
Тип файла: jpg Размер с середины списка.jpg (22.9 Кб, 1 просмотров)
Тип файла: jpg Начало списка.jpg (36.2 Кб, 0 просмотров)
Ответить с цитированием
  #6 (permalink)  
Старый 21.05.2018, 11:00
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

Можно этот код затолкать в тот же атрибут onclick, но прокручиваться список будет к началу страницы:
$('html,body').scrollTop(0);

Я бы так делать не стал, неправильно костылить на ровном месте.
Лучше разобраться что в коде вообще твориться, чтобы все сделать правильно.
Ответить с цитированием
  #7 (permalink)  
Старый 21.05.2018, 12:57
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Nexus, подскажите, а возможно сделать так, чтобы прокрутка была именно к свойству (по id например - $arItem["ID"])?

<div class="bx_filter_parameters_box_title"  
id=<?=$arItem["ID"]?> onclick="$('.bx_filter_block').hide();smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
Ответить с цитированием
  #8 (permalink)  
Старый 21.05.2018, 13:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,706

_marisha, можно, но нужно разбираться что и как работает.
Ответить с цитированием
  #9 (permalink)  
Старый 28.05.2018, 10:16
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Nexus, замечено, при повторном нажатии на раскрытое свойство оно не сворачивается.
Подскажите, пожалуйста, каким образом возможно подправить возникшую проблему? Спасибо.
Ответить с цитированием
  #10 (permalink)  
Старый 28.05.2018, 11:06
Профессор
Отправить личное сообщение для _marisha Посмотреть профиль Найти все сообщения от _marisha
 
Регистрация: 18.05.2018
Сообщений: 170

Сообщение от _marisha Посмотреть сообщение
Nexus, замечено, при повторном нажатии на раскрытое свойство оно не сворачивается.
Подскажите, пожалуйста, каким образом возможно подправить возникшую проблему? Спасибо.
- возникает в случае, если в первое условие вместо BX.removeClass(obj, "active"); написать BX.addClass(obj, "active"); А в исключении наоборот вместо BX.addClass(obj, "active") поставить BX.removeClass(obj, "active"). Это был эксперимент
Без эксперимента, при последующем открытии свойства предыдущее свойство закрывается, но если попробовать предыдущее свойство открыть снова, то открывается только при втором клике.
Пример:
1) открываем "Производитель"
2) открываем "Цена" -> "Производитель" скрывается
3) открываем "Производитель" -> "Цена" скрывается, но производитель не открывается.
Если верно понимаю, то при открытии одного свойства, у других должен удаляться класс active. Но удаление класса происходит только при втором клике (в данном случае при клике на "Производитель")
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Считывание значения текущего выбранного элемента списка в переменную apomin Элементы интерфейса 1 15.10.2015 19:47
Не работает скрипт отображения списка Konstantine Javascript под браузер 3 18.03.2013 06:00
самозакрывающееся меню в виде списка о_О dimitar Элементы интерфейса 4 20.03.2012 15:27
Динамическое добавление выпадающего списка В IE stepennwolf Internet Explorer 3 04.11.2011 17:36
Заполнить список значениями из динамически созданного выпадающего списка zhuzha Элементы интерфейса 0 17.08.2010 14:40