jQuery toggle – закрыть все, кроме этого

Я нашел этот код (jQuery):

$('.toggle').click(function() { $('.container').eq($(this).index()).toggle('fast'); }); 

Это мой HTML:

 

Title1

Title2

Title3

Content1
Content2
Content3

CSS

 .container { display: none; } 

Я могу переключать то, что хочу с ним.

Проблема

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

Текущий контейнерный class должен переключиться. Это означает, что все элементы могут быть закрыты, НО ТОЛЬКО ОДИН может быть открыт одновременно.

Я попытался просто скрыть jQuery перед сценарием, но это делает контейнерный class невозможным закрыть (потому что, когда переключатель переключения скрывается, отображается).

Код угадывает скрыть все .container, за исключением этого

Solutions Collecting From Web of "jQuery toggle – закрыть все, кроме этого"

Используя ответ Дэвида в качестве отправной точки, мы можем использовать .siblings для выполнения того, что вы хотите:

 $('.toggle').click(function() { var index = $(this).index(); $('.container').eq(index).toggle().siblings('.container').hide(); }); и $('.toggle').click(function() { var index = $(this).index(); $('.container').eq(index).toggle().siblings('.container').hide(); }); 

См .: http://www.jsfiddle.net/85zCp/


В стороне, вы можете захотеть использовать JavaScript, чтобы скрыть все элементы изначально вместо CSS, потому что пользователи с отключенным JavaScript не смогут видеть какой-либо контент, если вы используете CSS, чтобы скрыть их. Кроме того, вы, вероятно, захотите, чтобы каждый h4 заголовок перед содержимым, а не вместе, как вы делаете прямо сейчас.

$('.toggle').click(function () { $('.container').hide('fast'); $('.container').eq($(this).index()).show('fast'); });

Я точно не знаю, но я думаю, что это то, что вы ищете …

Приветствия …

Это немного подробный, но его использование должно быть достаточно очевидным:

 $('.toggle').click( function(){ var index = $(this).index(); $('.container').hide().eq(index).show(); }); 

Демо-версия JS Fiddle .