Javascript 单击另一个div时更改（切换）css

当我点击类名为“show”的div时，我将css添加到div的“mobile menu”中，这非常好，但是当我再次点击类名“show”时，我想将css更改到另一个高度

试试这个代码

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

.亮点{
身高：100%；
}
$（'.show'）。单击（函数（）{
$（“#移动菜单”）.toggleClass（“突出显示”）；
});

您需要设置一个布尔值，指示移动菜单的状态

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

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

---

试着这样做：

$(".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' });
    }
});

---

我在这些情况下所做的是

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

这会在所有选择器上添加和删除类

请尝试以下代码：

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

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

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