Много информации, спасибо.
Буду думать |
laimas,
вариант как я понял вас
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
<script>
$(function() {
$("a[data-cls]").each(function(indx, el) {
var cls = "." + $(el).data("cls");
$(el).on({
click: function(event) {
event.preventDefault();
$("div").slideUp().filter(cls).slideDown()
}
})
}).eq(0).click()
});
</script>
</head>
<body>
<a href="" data-cls="А" class="А">А</a>
<a href="" data-cls="С" class="С">С</a>
<a href="" data-cls="Я" class="Я">Я</a>
<div class="А">Арбуз</div>
<div class="А">Алыча</div>
<div class="С">Слива</div>
<div class="Я">Яблоко</div>
</body>
</html>
вариант того что предлагаю я
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</script>
<script>
$(function() {
var obj = [".А",".С",".Я"];
$.each(obj,function(indx, el) {
$("a"+el).on({
click: function(event) {
event.preventDefault();
$("div").slideUp().filter(el).slideDown()
}
})
})
$("a"+obj[0]).click()
});
</script>
</head>
<body>
<a href="" class="А">А</a>
<a href="" class="С">С</a>
<a href="" class="Я">Я</a>
<div class="А">Арбуз</div>
<div class="А">Алыча</div>
<div class="С">Слива</div>
<div class="Я">Яблоко</div>
</body>
</html>
оба варианта в минимальном исполнении |
Цитата:
Я исхожу из того, что сервер отдает списки, которые уже отсортированы по алфавиту, иначе смысла нет. Родителю этих списков можно давать ID связанные по литере рубрикатора при формировании этих списков, собственно это не сложно даже и для UTF:
<ul id="list<?=current(unpack('N', mb_convert_encoding($letter, 'UCS-4BE', 'UTF-8')))?>">
<li>...</li>
</ul>
Обработка щелчка по литере рубрикатора, это получение ее текста, и кода литеры по ней, с показом списка с ID равным list + charCode литеры. Или в data-code держать уже готовой ее код, серверу ведь все равно и список литер формировать. А если объект, то это если клиент списками занимается, да если они еще и разбросаны, да еще по классам их собирать, разве это выгоднее? |
laimas,
спасибо, но я вас не понимаю :( от слова совсем ... особенно это Цитата:
|
Цитата:
Пусть изначально на странице есть только список литер рубрикатора, запрос по которым, это асинхронный запрос и возврат клиенту запрошенного. Понятное дело, что сервер вернет список только тех данных, что отвечают нажатой литеры. Тут ситуация практически та же, с разницей в том, что все уже на клиенте, нужно только показывать скрытое. Зная это, разве выгодно разбросать эти данные на странице так, чтобы потом требовалось их выискивать для показа? Мне представляется, что и в этом случае выгодно отдавать уже отсортированные по литерам списки, связав их со списком литер по по их коду. То есть на клиенте будет так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.list ul {
display: none;
}
#choice li {
display: inline;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function() {
$('#choice').on('click', 'li', function() {
$('#list'+$(this).data('code')).show()
})
});
</script>
</head>
<body>
<ul id="choice"><li data-code="1040">А</li><li data-code="1041">Б</li></ul>
<div class="list">
<ul id="list1040">
<li>А</li>
</ul>
<ul id="list1041">
<li>Б</li>
</ul>
</div>
</body>
</html>
|
laimas,
хорошо но это же Цитата:
|
Цитата:
|
Спасибо за помощь. Первый вариант из этого поста мне больше всего понравился.
Я его немного доработал - теперь он разворачивает весь список при первом открытии и разворачивает его же при нажатии пункта "Все". Посмотреть можно здесь. Если есть предложения по улучшению - буду рад. И да. Список в моём случае, это не ul-li, а просто набор div. Т.е. всё как в примере. |
MAzZYBiG,
одинаковые id это неправильно, и выбирать все дивы тоже, на странице наверняка есть много других ...ограничте нужные одним классом ... |
Да, согласен.
Так даже лучше |
| Часовой пояс GMT +3, время: 20:19. |