jQuery Toggle Issue - исчезновение div-ов

Question

Попытка создать простой переключатель, в котором кто-то щелкает элемент списка с ID, и он отображает div, связанный с указанным элементом списка, затем при нажатии другого элемента списка первый div исчезает иновый div исчезает и, очевидно, должен работать там, где, если вы нажмете <li id="1">, затем <li id="3">, а затем вернетесь к 1, все будет работать правильно.

Вот мой код.

$(document).ready(function() {
    $('#list li').toggle(function() {
        var $value = ($(this).attr('id'));
        $('#song' + $value).fadeIn();
    },
    function() {
        $('#song' + $value).fadeOut(); 
        var $value = ($(this).attr('id'));
        $('#song' + $value).fadeIn();
    });
});

Спасибо!матовый

Answer 1

Более простой способ исчезновения видимого в данный момент элемента div - использовать селектор :visible.Кроме того, если я правильно понимаю ваш вопрос, я думаю, что вы можете добиться желаемого поведения, просто используя .click() вместо .toggle():

$('#list li').click( function() {
  $('#your_container').find('div:visible').fadeOut();
  $('#song' + this.id).fadeIn(); // simpler, no intermediate variable needed
});