На сайте есть 2 колонки. Выводится в них контент через php.
В левой колонке выводилось все просто дивами, которые шли друг за другом. К ним я применил метод, которым делают стилизованные селекты.
И все получилось. Свернул длинный столбец в выезжающий список.
Привел html к такому коду
<style>
.slct {
display: block;
border-radius: 5px;
border: 1px solid #cecece;
background-color: #F6F6f6;
width: 285px;
padding: 4px 15px 4px 10px;
color: #444;
background-position: 290px -145px;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.slct.active {
border-radius: 5px 5px 0 0;
border-bottom: none;
}
.drop {
margin: 0;
padding: 0;
width: 310px;
border: 1px solid #cecece;
border-top: none;
display: none;
position: absolute;
background: #fff;
}
.drop li {
list-style: none;
border-top: 1px dotted #e8e8e8;
cursor: pointer;
display: block;
color: #444;
padding: 4px 15px 4px 25px;
background-position: 10px -119px;
}
.drop li:hover {
background-color: #e8e8e8;
color: #222;
}
</style>
<div class="select">
<a href="javascript:void(0);" class="slct">Выберите нужный пункт:</a>
<ul class="drop">
<li><a href=""><div>тут элемент списка</div></a></li>
<li><a href=""><div>тут элемент списка</div></a></li>
<li><a href=""><div>тут элемент списка</div></a></li>
<li><a href=""><div>тут элемент списка</div></a></li>
</ul>
</div>
И такой вот JS. Там есть несколько лишних строк по занесению инфы в скрытый инпут (который я не делал), но не мешает, боюсь трогать.
$('.slct').click(function(){
var dropBlock = $(this).parent().find('.drop');
if( dropBlock.is(':hidden') ) {
dropBlock.slideDown();
$(this).addClass('active');
$('.drop').find('li').click(function(){
var selectResult = $(this).html();
$(this).parent().parent().find('input').val(selectResult);
$(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
dropBlock.slideUp();
});
} else {
$(this).removeClass('active');
dropBlock.slideUp();
}
return false;
});
А вот как свернуть вторую колонку я не понимаю. Попробовал тоже самое проделать. Но там внутри дивов есть ссылки, на которых видимо какой-то обработчик сидит. И выдает ошибку.
Помогите помогите изменить структуру так, чтобы свернулось все как и этот столбик.
ФОрмируется колонка правая таким вот кодом.
$temp .= '<div class="righthomecol"><div class="righthomecolvn">';
$temp .= apply_filters('exb_before_xchange_right','');
$r=0;
foreach($naps as $napob){ $r++;
$valid = $napob->valsid1;
if($r==1){ $cl='act'; } else { $cl=''; }
$temp .= '<div class="tabhome '. $cl .'" id="napobmento-'. $valid .'">';
if(isset($napsto[$valid])){
$fors = $napsto[$valid];
if(is_array($fors) and count($fors) > 0){
foreach($fors as $for){
$nvalid = $for->valsid2;
$temp .= '<a href="'. get_exchange_link($valuts[$valid]->xname, $valuts[$nvalid]->xname) .'" class="onehrine">
<input type="hidden" value="'. pn_strip_input($valuts[$valid]->xname) .'" name="xname1" />
<input type="hidden" value="'. pn_strip_input($valuts[$nvalid]->xname) .'" name="xname2" />';
$temp .= '
<div class="onehrineico" style="background: url('. is_ssl_url($valuts[$nvalid]->vlogo) .') no-repeat center center"></div>
<div class="onehrinetext">
'. pn_strip_input($valuts[$nvalid]->vname .' '. $valuts[$nvalid]->vtype) .'
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="'. pn_strip_input($valuts[$nvalid]->vname .' '. $valuts[$nvalid]->vtype) .'" name="'. $nvalid .'">
<div class="zaprosvalutrel">
'. __('I am missing?','pn') .'
</div>
</div>
'. output_sum(get_valut_reserv($valuts[$nvalid]), 2) .'
</div>';
$temp .= '
<div class="clear"></div>
</a>';
}
}
}
$temp .= '</div>';
}
$temp .= '</div></div>';
Если это не простая задача - готов обсудить выполнение на платной основе.
