Сделать разворачивающимся списком много дивов сложной структуры
На сайте есть 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>';
Если это не простая задача - готов обсудить выполнение на платной основе. |
Цитата:
|
Цитата:
Сайт https://ddchange.com/ Там выводятся в 2 колонки списки валют для обмена. Левый оказался попроще. У того что правый структура совсем какая-то мудреная... Я хотел было уже просто сделать чтобы вся правая колонка скрывалась и открывалась при нажатии на ссылку, например. Как выпадающее меню грубо говоря. Чтобы его структуру не ломать совсем и все работало. Но при нажатии на определенный пункт из этого списка, нужно чтобы он оставался видимым. Чтобы было видно направление обмена. |
the_little,
не понимаю |
Цитата:
Было 2 длинных колонки с перечнями валют к обмену. В левой колонке выбирается что отдавать. В правой колонке выбирается что получать. Левую колонку я смог превратить в выпадающий список. Правый нужно привести к такому же виду, в каком сейчас левый. Попытка сделать это по аналогии с левым ломает все... У меня не получилось. там если HTML посмотреть в консоли, видна структура. Там генерируется куча блоков разных со ссылками. И в зависимости от того что выбрано в левом столбце - делается активным определенный список валют. |
the_little,
лучше сформировать данную структуру на сервере (ждите специалистов по php) , а пока можно
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<base href="https://ddchange.com/" />
<link rel="stylesheet" href="https://ddchange.com/wp-content/themes/exchangeboxtheme2/style.css?ver=1517010219">
<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;
}
a.onehrine.act{
background-color: #f5f5f5;
}
.drop a.onehrine{
display: flex;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".tabhome").each(function(indx, el) {
var a = $('<a href="javascript:void(0);" class="slct">Выберите нужный пункт:</a>').appendTo(el);
var ul = $('<ul class="drop"></ul>').appendTo(el);
a.on("click", function(event) {
event.preventDefault();
ul.slideToggle();
});
var links = $(".onehrine", el).each(function(indx, link) {
$("<li>", {html:link, click:function(event) {
event.preventDefault();
links.removeClass("act");
$(link).addClass("act")
a.html($(".onehrineico,.onehrinetext", link).clone());
ul.slideUp();
}}).appendTo(ul);
});
});
});
</script>
</head>
<body>
<div class="tabhome act" ><a href="https://ddchange.com/xchange_RUSSTRUB_to_BTC/" class="onehrine first">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="BTC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/BTC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Bitcoin BTC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Bitcoin BTC" name="6">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
39
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ETH/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ETH" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/ethereum.svg) no-repeat center center"></div>
<div class="onehrinetext">
Ethereum ETH
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Ethereum ETH" name="3">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
8.18
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_LTC/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="LTC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/LTC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Litecoin LTC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Litecoin LTC" name="4">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ZEC/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ZEC" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/zcash.svg) no-repeat center center"></div>
<div class="onehrinetext">
ZCash ZEC
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="ZCash ZEC" name="5">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_DASH/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="DASH" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/DASH.svg) no-repeat center center"></div>
<div class="onehrinetext">
Dash DASH
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Dash DASH" name="1">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_LVCUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="LVCUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/LVCUSD.svg) no-repeat center center"></div>
<div class="onehrinetext">
Livecoin USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Livecoin USD" name="8">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_PRUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="PRUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/PAYEER.svg) no-repeat center center"></div>
<div class="onehrinetext">
Payeer USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Payeer USD" name="29">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_ADVCUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="ADVCUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/ADVC.svg) no-repeat center center"></div>
<div class="onehrinetext">
Advanced Cash USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Advanced Cash USD" name="20">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a><a href="https://ddchange.com/xchange_RUSSTRUB_to_PMUSD/" class="onehrine">
<input value="RUSSTRUB" name="xname1" type="hidden">
<input value="PMUSD" name="xname2" type="hidden">
<div class="onehrineico" style="background: url(/svg/pm.svg) no-repeat center center"></div>
<div class="onehrinetext">
Perfect Money USD
</div>
<div class="onehrinerezerv">
<div class="zaprosvalutrelvn" title="Perfect Money USD" name="30">
<div class="zaprosvalutrel">
Не хватает?
</div>
</div>
0
</div>
<div class="clear"></div>
</a></div>
</body>
</html>
|
Огромное спасибо!
Если я правильно понимаю - тут чисто при помощи JS список организован? ПРописал этот JS, Выпадающий список получился. Осталась небольшая проблема. ТАм при нажатии во втором столбце происходит какая-то обработка. Результатом этой обработки является вывод дополнительного блока, в котором уже вводятся суммы для обмена. Так вот сейчас этот обработчик не срабатывает. Выдает ошибку. |
the_little,
строка 74, уберите, но тогда будет переход по ссылке...и может суммы выводятся но их не видно из-за css. |
Цитата:
Строку убрал - не помогло. Все равно ошибка. Наверное надо где-то включить отображение ошибок, может что-то выводится где-то. |
Интересно.
Выбираю в левом списке. ПОтом выбираю в правом списке. Вылетает ошибка. Нажимаю еще раз на правый список - все срабатывает. Дальше только после обновления страницы. На этой уже не реагирует на выбор другой валюты. |
the_little,
не могу помочь, ваш сайт глючит. |
| Часовой пояс GMT +3, время: 22:16. |