Изменить (переключить) css при нажатии на другой div

Когда я нажимаю на div с именем класса «show», я добавляю css в div «mobile-menu», это работает отлично, но я хотел бы изменить css на другую высоту, когда я нажимаю на имя класса " показать еще раз

$(".show").click(function() { 
$('#mobile-menu').css({ 'height': '100%' });
// when i click on .show again: .css({ 'height': '51px' });
});

javascript toggle jquery css toggleclass
person Erwin van Ekeren    schedule 11.11.2014    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Попробуйте этот код.

$(".show").click(function() { 
    if ($('#mobile-menu').css('height') === '100%')
        $('#mobile-menu').css({ 'height': '51px' });
    else
        $('#mobile-menu').css({ 'height': '100%' });
});
person Alvin Magalona    schedule 11.11.2014

arrow_upward
0
arrow_downward

Вам нужно установить логическое значение, указывающее состояние #mobile-menu

var isFullHeight;
$(".show").click(function() { 

    if (isFullHeight)
    {
         $('#mobile-menu').css({ 'height': '51px' });
         isFullHeight = false;
    }
    else
    {
        $('#mobile-menu').css({ 'height': '100%' });
        isFullHeight = true;
    }
});
person Kurren    schedule 11.11.2014

arrow_upward
0
arrow_downward

Попробуйте что-то вроде этого:

$(".show").click(function() { 
    var clicks = $(this).data('clicks');
    if (clicks) {
        // odd clicks
        $('#mobile-menu').css({ 'height': '100%' });
    } else {
        // even clicks
        // when i click on .show again: .css({ 'height': '51px' });
    }
});
person Thomas Bormans    schedule 11.11.2014

arrow_upward
0
arrow_downward

Что я делаю в этих случаях, так это

$('.someClass').toggleClass('someClass'); //removes someClass from all elements using someClass
$(this).toggleClass('someClass');

это добавляет и удаляет класс для всех селекторов

person Max Bumaye    schedule 11.11.2014

arrow_upward
0
arrow_downward

Попробуйте этот код:

$(".show").toggle(function(){
$(#mobile-menu).css({height:40});
},
function(){
$(#mobile-menu).css({height:10});
});
person Som    schedule 11.11.2014