Добрый день!
На странице есть div, содержащий несколько выпадающих блоков. Вот код:
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.
<div class="compare_headings">
<div class="compare_heading row01">
<div class="compare_heading_header">
<a class="compare_collapse_button"></a>
<h3>Общие характеристики</h3>
<img src="/images/car/mate/rounder-tl.png" alt="" class="rounder_tl" />
<img src="/images/car/mate/rounder-bl.png" alt="" class="rounder_bl" />
</div>
<div class="compare_heading_inside">
<p><span>Количество дверей</span></p>
<p><span>Число мест</span></p>
</div>
</div>
<div class="compare_heading row02">
<div class="compare_heading_header">
<a class="compare_collapse_button"></a>
<h3>Рулевое управление</h3>
<img src="/images/car/mate/rounder-tl.png" alt="" class="rounder_tl" />
<img src="/images/car/mate/rounder-bl.png" alt="" class="rounder_bl" />
</div>
<div class="compare_heading_inside">
<p><span>Радиус разворота, м</span></p>
<p><span>Усилитель руля</span></p>
</div>
</div>
<!-- и так далее. Всего таких блоков 9-->
</div>
По нажатию на заголовок соответствующий блок сворачивается.
На странице подключен следующий js:
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.
29.
$(document).ready(function(){
//...
//закрытие блока
$(".compare_item_delete").click(function () {
$(this).parent().parent().hide();
widthVar = $(".compare_results_inside").width();
$(".compare_results_inside").width(widthVar - 245 );
});
//нужно спрятать те что уже колапснутые, чтобы гладко работала анимация
$(".row04 .compare_item_part_header, .row04 .compare_item_part_inside, .row04 .compare_heading_inside").hide();
$(".row05 .compare_item_part_header, .row05 .compare_item_part_inside, .row05 .compare_heading_inside").hide();
$(".row06 .compare_item_part_header, .row06 .compare_item_part_inside, .row06 .compare_heading_inside").hide();
$(".row07 .compare_item_part_header, .row07 .compare_item_part_inside, .row07 .compare_heading_inside").hide();
$(".row08 .compare_item_part_header, .row08 .compare_item_part_inside, .row08 .compare_heading_inside").hide();
$(".row09 .compare_item_part_header, .row09 .compare_item_part_inside, .row09 .compare_heading_inside").hide();
$(".row01 .compare_collapse_button").click(function () {
if( !$(".row01").hasClass("collapsed") ) {
//$(".row01 .compare_item_part_inside, .row01 .compare_heading_inside").css("display","block");
$(".row01").addClass("collapsed");
$(".row01 .compare_item_part_header, .row01 .compare_item_part_inside, .row01 .compare_heading_inside").slideUp("slow");
} else {
$(".row01").removeClass("collapsed");
$(".row01 .compare_item_part_header, .row01 .compare_item_part_inside, .row01 .compare_heading_inside").slideDown("slow");
}
});
//далее следуют еще 8 аналогичных функций
//...
}
Стиль css для div
.compare_headings {position: absolute; width: 267px; top: 656px ; left: 0 }
Так же на странице находится кнопка «Добавить», по нажатию на которую к div'у с выпадающими блоками добавляется аяксом колонка значений.
Проблема состоит в том, что при загрузке страницы в IE div отображается внизу, хотя его там быть не должно. В браузере Opera div не виден, но появляется большой вертикальный скроллинг. В остальных браузерах все хорошо. Стоит мне добавить колонку значений, как div появляется на нужном месте.
