Скрытие/раскрытие списка
Вложений: 1
Доброго времени суток!
На сайте присутствует фильтр. При нажатии на кнопку "Фильтр" появляется сам фильтр со свернутыми свойствами (скрин "Свойства свернуты"). В данном списке свойство "Цена" всегда развернут - пусть так и останется. Необходимо, чтобы при нажатии на кнопку "Фильтр" сам фильтр появлялся с развернутым свойством "Производитель". Если развернуть свойство "Цена", должно сворачиваться свойство "Производитель". Если развернуть свойство "Размер", должно сворачиваться свойство "Цвет". Т.е. должно быть развёрнуто только что-то одно из "Производитель", "Размер" и "Цвет". Сейчас свойство разворачивается/сворачивается при нажатии на само свойство - это стандартный функционал. В шаблоне фильтра найден код:
<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");
}
};
Подскажите, пожалуйста, каким образом возможно реализовать скрытие предыдущего свойства при раскрытии другого? Спасибо. |
Я подобной функцией пользовался, если класс объекта одинаковый, а id разные то получится. В функцию передаем id:
function show (index){
$(".bx_filter_block").css({"display":"none"}).eq(index).css({"display":"inline"});
}
|
Вложений: 3
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"> |
Так?
<div class="bx_filter_parameters_box_title" onclick="$('.bx_filter_block').hide();smartFilter.hideFilterProps(this)"><?=$arItem["NAME"]?></div>
|
Вложений: 2
Nexus, спасибо Вам огромное, данный вариант действительно решает задачу с закрытием предыдущего списка :)
При тестировании обнаружено, что открытое свойство не прокручивается к началу списка, т.е. при открытии (к примеру) "Размер", на экране видны значения с середины (скрин "Размер с середины списка"), а не начало списка (скрин "Начало списка"). Подскажите, пожалуйста, возможно ли сделать так, чтобы всегда отображался список сверху? |
Можно этот код затолкать в тот же атрибут onclick, но прокручиваться список будет к началу страницы:
$('html,body').scrollTop(0);
Я бы так делать не стал, неправильно костылить на ровном месте. Лучше разобраться что в коде вообще твориться, чтобы все сделать правильно. |
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>
|
_marisha, можно, но нужно разбираться что и как работает.
|
Nexus, замечено, при повторном нажатии на раскрытое свойство оно не сворачивается.
Подскажите, пожалуйста, каким образом возможно подправить возникшую проблему? Спасибо. |
Цитата:
Без эксперимента, при последующем открытии свойства предыдущее свойство закрывается, но если попробовать предыдущее свойство открыть снова, то открывается только при втором клике. Пример: 1) открываем "Производитель" 2) открываем "Цена" -> "Производитель" скрывается 3) открываем "Производитель" -> "Цена" скрывается, но производитель не открывается. Если верно понимаю, то при открытии одного свойства, у других должен удаляться класс active. Но удаление класса происходит только при втором клике (в данном случае при клике на "Производитель") |
Ситуация решилась добавлением в JCSmartFilter.prototype.hideFilterProps в else
$('div.active').removeClass('active');
.Итог:
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();
[B]$('div.active').removeClass('active');[/B]
BX.addClass(obj, "active");
}
};
Не знаю, насколько данный вариант верный, но вроде работает как надо :) |
| Часовой пояс GMT +3, время: 20:15. |