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

Question

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

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

Это мой HTML:

<h4 class="toggle">Title1</h4>
<h4 class="toggle">Title2</h4>
<h4 class="toggle">Title3</h4>
<div class="container">Content1</div>
<div class="container">Content2</div>
<div class="container">Content3</div>

CSS

.container {
   display: none;
}

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

Проблема

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

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

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

Кодовая догадка скрыть все .контейнер, кроме этого

Answer 1

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

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

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

---

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

Answer 2

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

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

JS Fiddle demo .

Answer 3

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

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

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