Работа с несколькими переключателями

Question

Я застрял в кошмаре с переключателем () и, наконец, прошу помощи.

То, что я хочу, довольно просто, у меня есть три ссылки:

a.showcountries.bronze
a.showcountries.silver
a.showcountries.gold

и три поля:

.countries.bronze
.countries.silver
.countries.gold

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

$('a.showcountries.bronze').toggle(
        function(){
            $('.countries.silver, .countries.gold').slideUp();
            $('.countries.bronze').slideDown();
        },
        function(){
            $('.countries.bronze').slideUp();
        }
    );
    $('a.showcountries.silver').toggle(
        function(){
            $('.countries.bronze, .countries.gold').slideUp();
            $('.countries.silver').slideDown();
        },
        function(){
            $('.countries.silver').slideUp();
        }
    );
    $('a.showcountries.gold').toggle(
        function(){
            $('.countries.silver, .countries.bronze').slideUp();
            $('.countries.gold').slideDown();
        },
        function(){
            $('.countries.gold').slideUp();
        }
    );  

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

Answer 1

toggle(), поскольку событие запоминает предыдущий щелчок и запускает альтернативную функцию для следующего.Вам лучше использовать одно нажатие и проверить видимость.Нечто подобное может работать лучше для вас:

$(".showcountries").click(function () {
    var cls = this.className.match(/gold|silver|bronze/),
        box = $(".countries."+cls[0]);

    // slideUp() on all .countries elements
    $(".countries").not(box).slideUp();

    box.slideToggle();
});

Рабочая демонстрация: http://jsfiddle.net/kSrvZ/1 (спасибо YiJiang за предложение slideToggle () в чате).

Answer 2

Я сделал jsFiddle, который должен приблизить вас.

Проверьте это здесь

Он основан на событии щелчка, и вы используете идентификатор для проверкикакой div вы хотите показать, и закройте тот, если он уже открыт.Можете ли вы настроить html / css / js таким образом?

Answer 3

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

$('a.showcountries').click(function()
{
    var class = $(this).attr('id');
    $('.countries').not('.' + class).slideUp();
    $('.countries').filter('.' + class).slideDown();
});

Редактировать: Я исправлен! Вы чему-то учитесь каждый день:)