Показать сообщение отдельно
  #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 просмотров)
Ответить с цитированием