Jquery Mobile - Добавить возможность развернуть / свернуть
Я использую jQuery Mobile, чтобы взять динамический data-role = "list-divider" и сделать его сворачиваемым. Это прекрасно работает для отображения длинного списка «Клиентов», разделенных на их «Статус».
Как мне добавить кнопку переключения, которая «Развернуть все / Свернуть все»? Вот мой код ColdFusion ниже и код JavaScript.
Я использую этот образец jsfiddle для создания своей страницы: http://jsfiddle.net/ezanker/5PnBT/50/
$(document).on("pageinit", "#page-wrapper", function() {
$("#com-status-value").listview({
autodividers: true,
autodividersSelector: function(li) {
var out = li.attr('status');
return out;
}
}).listview('refresh');
var ic = '<div class = "ui-icon ui-icon-minus dividerIcon"> </div>'
$(".ui-li-divider").prepend(ic);
$(".dividerIcon").addClass("divIconPos");
});
$(document).on("click", '.ui-li-divider, .dividerIcon', function(e) {
var IsCollapsed = true;
var TheDivider = $(this);
if ($(this).hasClass('dividerIcon')) {
TheDivider = $(this).parents('.ui-li-divider');
}
var li = TheDivider.next(':not(.ui-li-divider)');
while (li.length > 0) {
IsCollapsed = li.css('display') == 'none';
li.toggle();
li = li.next(':not(.ui-li-divider)');
}
if (!IsCollapsed) {
TheDivider.find('.dividerIcon').removeClass('ui-icon-minus').addClass('ui-icon-plus');
} else {
TheDivider.find('.dividerIcon').removeClass('ui-icon-plus').addClass('ui-icon-minus');
}
e.stopPropagation();
return false;
});.ui-li-divider {
padding-left: 28px;
}
.divIconPos {
position: absolute;
display: inline;
left: 3px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div data-role = "page" data-add-back-btn = "false" id = "page-wrapper">
<div data-role = "header">
<h1>Open FFO Orders
<cfoutput>(#rsCOM.recordcount#)</cfoutput>
</h1>
<a href = "" class = "ui-btn-right" data-icon = "home" data-iconpos = "notext" data-direction = "reverse">Expand</a>
</div>
<div data-role = "content" data-filter = "true">
<ul id = "com-status-value" data-inset = "false" data-role = "listview" data-filter = "true">
<cfoutput query = "rsCOM" group = "status">
<li data-role = "list-divider" data-filter = "true">
#rsCOM.status#
</li>
<cfoutput>
<li>
<p>#custAddress# #cc#, #st# #zp#</p>
<p>Last Modified: #LmMb# </p>
</li>
</cfoutput>
</cfoutput>
</ul>
</div>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я бы попробовал это:
- добавить кнопку
Expands All/Collapses Allможет значимый значок - добавить прослушиватель событий для кнопки
- при нажатии (касании) проверьте, не свернут ли какой-либо из элементов, если да, то разверните все, если нет, то сверните все
HTML
<input type = "button" id = "expand-collapse" value = "Expands All/Collapses All" />
JavaScript
var $listItems = $('#hp-latest-articles li:not(.ui-li-divider)');
$('#expand-collapse').on("click", function () {
if ($('#hp-latest-articles li:not(.ui-li-divider):hidden').length) {
$listItems.show();
} else {
$listItems.hide();
}
});
jsfiddle:http://jsfiddle.net/Lrhebm2z/
Обновлять:
код для id com-status-value
var $listItems = $('#com-status-value li:not(.ui-li-divider)');
$('#expand-collapse').on("click", function () {
if ($('#com-status-value li:not(.ui-li-divider):hidden').length) {
$listItems.show();
} else {
$listItems.hide();
}
});
Алекс, спасибо за помощь с кнопкой .. К сожалению, я не могу заставить свою работать (я добавил код и кнопку, но она не переключает содержимое?) Это jsfiddle, который я фактически моделирую: jsfiddle.net/ezanker/4mPNj (кроме моего, использующего динамические данные и значения разделителя)
На вашем jsfiddle у вас есть <ul id = "hp-latest-articles", но в вашем коде ColdFusion у вас есть <ul id = "com-status-value", поэтому попробуйте захватить $listItems, используя правильный идентификатор для вашего кода.
спасибо за подсказку и обновление .. Я проверил и использую "com-status-value" для всех моих элементов. Я, должно быть, что-то упускаю ..?
обновленный ответ, убедитесь, что у вас есть com-status-value в 2 местах (строка 1 и строка 3)
все обновлено с вашей последней .. нажмите кнопку "Развернуть / Свернуть", ничего не делает? это безумие ... единственная разница между вашим jsfiddle и моим кодом - это мой раздел списка ... там должно быть что-то?
попробуйте сначала взять ul с $('#com-status-value'). Что происходит, когда вы запускаете $('#com-status-value') в консоли?
init [ul # com-status-value.ui-listview, context: document, selector: "# com-status-value"] 0: ul # com-status-value.ui-listview context: длина документа: 1 селектор: "# com-status-value" прото: Объект (0)
Затем проверьте, есть ли у ваших разделителей класс ui-li-divider
добавлен в этот класс к моему <li data-role = "list-divider" data-filter = "true" class = "ui-li-divider"> .... без изменений?
Алекс, как альтернатива .. видишь ли ты способ сделать список "свернутым" по умолчанию .. jsfiddle.net/Lrhebm2z
запустите $listItems.hide(); при запуске, но сначала вам нужно их захватить. С jQuery должно быть легко, если у вас есть правильный идентификатор и классы. Используйте консоль для пошагового выбора элементов, нет причин, по которым это не должно работать, если вы выбираете правильные вещи.
Алекс, спасибо за помощь ... но мне не удалось заставить это работать ... извините, я недостаточно знаком с вашими пошаговыми предложениями ... одна вещь, которую я заметил, это то, что у меня есть дополнительный вложенный <li> раздел, где у вас только один?
Пожалуйста, создайте минимальный воспроизводимый пример при создании сниппета. Это означает отсутствие CF или других шаблонов - проблема в JS, а не в CF