Показать сообщение отдельно
  #1 (permalink)  
Старый 26.01.2018, 23:18
Профессор
Отправить личное сообщение для the_little Посмотреть профиль Найти все сообщения от the_little
 
Регистрация: 25.09.2017
Сообщений: 186

Сделать разворачивающимся списком много дивов сложной структуры
На сайте есть 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>';


Если это не простая задача - готов обсудить выполнение на платной основе.
Ответить с цитированием