Intereting Posts
Как скрыть все tr из таблицы, кроме щелчка Центрировать мой текст, но сохранить выравнивание влево? CSS-селектор для исключения всех детей, где любой родитель на ЛЮБОМ УРОВНЕ имеет class Проблемы с акцентированными буквами на веб-сайте Атрибут Placeholder не поддерживается в IE. Какие-либо предложения? WP7 IE – модальное всплывающее окно CSS: краны / клики проходят через overlay div и триггерные ссылки, которые должны быть невидимыми Подчеркните первые n символов слов Кнопки с одним и тем же именем, показывающие разные divs Как найти, если String содержит html-данные? Почему вложенные якорные метки запрещены? Должно ли это иметь значение, если я использую bootstrap.js или все 14 отдельных .js-файлов? Попытка построить аффикс-поведение Достижение минимальной ширины с метатегью просмотра Переключение между значками при использовании FontAwesome 5.0 SVG Framework Почему радиокнопки не могут быть «readonly»? xpath: найти ячейку таблицы с одинаковым положением в другой строке

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, за исключением этого

Используя ответ Дэвида в качестве отправной точки, мы можем использовать .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 .