jQuery Toggle, Hide & Change class

Question

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

У меня 2 дивы в пределах страницы, как это ...

<div class="span4 section"> 
    ...content... 
</div> 
<div class="span8 section"> 
...content... 
</div> 

Мне нужно реализовать OnClick, который будет скрывать span4 DIV и изменить класс span8 дел до span12, и после этого было сделано, чтобы вернуть его обратно (используя jQuery.toggle, я предполагаю).

Я могу успешно сделать то или другое, но не могу заставить обе вещи работать в то же время, используя мои несколько ограниченные знания JS/jQuery!

Answer 1

вы должны добавить еще одно имя класса для вас span8 класса, например, toggleSpan, а затем

$('.clickElement').click(function() { 
    $('.span4').toggle(); // this toggles only visibility 
    $('.toggleSpan').toggleClass('span8 span12'); 
}); 

при условии, что элемент, который вы хотите использовать в качестве триггера имеет класс clickElement

Answer 2

$(this).toggleClass('span12 section'); 
$('.class="span4 section").hide(); 

вызов этой функции по щелчку

Answer 3

Попробуйте это: http://jsfiddle.net/SwANP/

$('.section').click(function(){ 
    $('.section:eq(0)').toggleClass('span4'); 
    $('.section:eq(1)').toggleClass('span8 span12'); 
}); 

Answer 4

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

$('#target').click(function(event){ 
    if ($(this).data('toggled') == '1') { 
     $('.span8').addClass('span12').removeClass('span8'); 
     $(this).data('toggled', '0'); 
    } else { 
     $('.span12').addClass('span8').removeClass('span12'); 
     $(this).data('toggled', '1'); 
    } 
});