jQuery list item toggle

Question

У меня есть простая функция для переключения класса элементов списка с «active» на «inactive». Каков наиболее эффективный способ (т. Е. Использование наименьшего количества кода), чтобы все остальные элементы списка были «неактивными», чтобы мог быть только один «активный» элемент списка? Пример приведен ниже. Спасибо

<ul class="menu"> 
    <li id="one" class="active">One</li> 
    <li id="two" class="inactive">Two</li> 
    <li id="three" class="inactive">Three</li> 
    <li id="four" class="inactive">Four</li> 
    <li id="five" class="inactive">Five</li> 
</ul> 

<script> 
    $('#one').click(function() { 
     if ($(this).hasClass("inactive")) { 
      $(this).removeClass("inactive").addClass("active"); 
     } else { 
      $(this).removeClass("active").addClass("inactive"); 
     } 
    }); 
</script> 

Answer 1

Это может работать:

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active').addClass('inactive'); 
    $(this).addClass('active').removeClass('inactive'); 
}); 

или

$('.menu li').click(function() { 
    $('.menu li').removeClass('active').addClass('inactive'); 
    $(this).toggleClass('active inactive'); 
}); 

Второй метод короче, но медленнее.

http://jsperf.com/toggle-vs-add-remove

Edit: Это один короче и быстрее:

$('.menu li').click(function() { 
    $('.menu li').not(this).removeClass('active'); 
    $(this).addClass('active'); 
}); 

Если производительность действительно проблема, которую вы можете сохранить ваше меню в переменной и выполнять операции по этой переменной, например:

var $menu = $('.menu li'); 
$menu.click(function() { 
     $menu.not(this).removeClass('active'); 
     $(this).addClass('active'); 
    }); 

Answer 2

$('ul li').click(function() { 
    $('ul li').each(function() { 
     $(this).removeClass('active'); 
    }); 
    $(this).addClass('active'); 
}); 

JSFiddle

Answer 3

Если SEO не важен и для использования меньшего количества кода я бы сказал, используйте список радиокнопок. Затем вы можете создавать стиль и взаимодействовать в JavaScript с помощью селектора «: checked».

Answer 4

Для краткости:

$('ul.menu li').click(function() { 
    $(this).siblings().attr('class', 'inactive').end().toggleClass('inactive active'); 
}); 

JS Fiddle demo (127 символов, пробелы с удаленным символов подсчета: 115).

Character-counts at JS Fiddle, так как краткость была целью, кажется.

К сожалению, учитывая проблемы, выявленной в комментариях ниже, скорректированная реализация несколько более многословен, чем (в настоящее время общепринятый ответ), альтернативы являются:

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).siblings().add(t).attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo (174 символов, пробелы исключенным число символов: 133).

Или:

$('ul.menu li').click(function() { 
    var t = this; 
    $(this).parent().children().attr('class', function(){ 
     return t === this ? 'active' : 'inactive'; 
    }); 
}); 

JS Fiddle demo (176 символов, пробелы с удаленным символов подсчета: 135).

Конечно, белое пространство-удалено JQuery действительно становится несколько нечитаемого, но все же: я требую, э, моральной победы ...

Ссылки:

• add().
• attr().
• children().
• end().
• siblings().
• toggleClass().

Answer 5

Если вы уже используете пользовательский интерфейс jQuery, вы можете воспользоваться функцией выбора. Это даст вам то, что вы хотите, с наименьшим количеством кода. http://jqueryui.com/selectable/