JQuery ul li click перейти к следующему в списке

Question

ОК, почти там, ищем использовать Jquery и класс css (изображения) для навигации вверх и вниз по списку HTML ul li таким же образом, как выпадающий вариант выбора работает только для отображения только 1 элемента, а не раскрывающегося списка. кнопка, но следующий / предыдущий класс css для работы, хотя список только с одним элементом, отображаемым за раз, поэтому весь эффект немного похож на счетчик. например,

$('.next').click (function( MOVE TO NEXT ITEM IN LIST ))
$('.prev').click (function( MOVE TO PREV ITEM IN LIST ))

со списком, немного похожим на

<ul class="">
<li> Item 1</li>
<li> Item 2</li>
<li> Item 3</li>
<li> etc ....
</ul>
<img src="but..." class="next">
<img src="but..." class="prev">

Предложения, пожалуйста - и заранее спасибо

Answer 1

Люди должны проверить свой код перед публикацией! Ни один из приведенных выше ответов не работает.

Я исправляю это:

 var active = 0; // starts at zero
 var list = $('ul');

 list.children('li').eq('0').siblings().hide(); // Hide all except first list element

 $('.next').bind('click', function() {
  active = active == list.children('li').length-1 ? 0 : active + 1;
 });

 $('.prev').bind('click', function() {
  active = active == 0 ? list.children('li').length-1 : active - 1;
 });


 var getActive = function() {
  return list.children('li').eq(active);
 };

 $('.prev,.next').bind('click', function() {
  getActive().show().siblings().hide();
 });

Answer 2

Если я правильно понимаю ваш вопрос, вы хотите, чтобы за один раз отображался только один элемент списка. Для этого я бы изменил функции из ответа Дэвида, чтобы сделать что-то вроде этого.

var active = 0; // starts at zero
var list = $('ul');

var hideListItems = function(active) {
    $.each(list, function(count, item) {
        if (count !== active) {
            item.css({'display': 'none'});
        } else {
            item.css({'display': 'block'});
        }
    }
};

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
    hideListItems(active);
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
    hideListItems(active);
});

Answer 3

var active = 0; // starts at zero
var list = $('ul');

$('.next').bind('click', function() {
    active = active == list.length-1 ? 0 : active + 1;
});

$('.prev').bind('click', function() {
    active = active == 0 ? list.length-1 ? active - 1;
});

var getActive = function() {
    return list.children('li').eq(active);
};

Теперь используйте getActive(), чтобы получить активный элемент списка.

ОБНОВЛЕНИЕ : если вы хотите скрыть все элементы, кроме активного списка, просто добавьте:

$('.prev,.next').bind('click', function() {
    getActive().show().siblings().hide();
});