Javascript.RU

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

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

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

В шаблоне фильтра найден код:
<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 Кб, 1 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 18.05.2018, 14:11
Аспирант
Отправить личное сообщение для Artur_Hopf Посмотреть профиль Найти все сообщения от Artur_Hopf
 
Регистрация: 13.03.2018
Сообщений: 79

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

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

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)  
Старый Вчера, 09:15
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 1,868

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

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

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

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

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)  
Старый Вчера, 13:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 1,868

_marisha, можно, но нужно разбираться что и как работает.
Ответить с цитированием
Ответ



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

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


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