jQuery，当具体到位时更改css属性

-1

我的jQuery代码在单击时将我的div的高度从200px更改为100％。这工作完美。但我需要当我再次点击它时，同样的元素，div变回200px。我不知道如何做到这一点，除了通过if语句，但我不知道如何我会看到一个CSS属性匹配某个CSS属性。jQuery，当具体到位时更改css属性

这是我的代码。

<script> 
$(document).ready(function() { 

     $("#port1").click(function() { 
      $(".ppc").css("height","100%"); 
     }); 

    }); 

</script>

来源

2012-10-05 Spencer May

$('#port1').toggle(function() { 
    $(".ppc").css({height: "100%"}); 
}, function() { 
    $(".ppc").css({height: "200px"}); 
});

来源

2012-10-05 20:23:31 MikeB

完美！其他代码比其他代码更好地工作。对不起，我最后的评论是无用的，它没有延迟，这是我的转换，没有工作，所以它只是延迟。 –

'toggle'事件方法已被弃用。 http://api.jquery.com/category/deprecated/ – undefined

这个工程，但通过类添加CSS是一个更好的方法 – Huangism

定义具有高度100％的CSS类，上单击，然后切换类

CSS

.classname { 
    height: 100% 
}

$("#port1").click(function() { 
     $(".ppc").toggleClass('classname'); 
    });

它总是样式添加一个好主意使用CSS类，所以很容易添加/删除和更少的JS代码，如果你需要添加一大堆样式

来源

2012-10-05 20:21:15 Huangism

还有其他的情况下，切换不利于您的使用。在这些情况下，你可以使用.hasClass（'classname'）来检查类，如果为true，那么做一些事情，如果错误做别的事 – Huangism

您可以添加一个变量，指出var isPort1Max = false;

然后你可以在onclick函数中设置它。

var isPort1Max = false; 

function() { 
    if (isPort1Max){ 
     $(".ppc").css("height","100%"); 
     isPort1Max=true; 
    else { 
     $(".ppc").css("height","200px"); 
     isPort1Max=false; 
    } 
}

来源

2012-10-05 20:23:14 ajon

对不起，我试图保留所有的jQuery，因为我的代码的其余部分是很好的代码。 –

定义一个类都和使用toggleClass，或使用以下命令：

$("#port1").click(function() { 
    $(".ppc").css("height", function(i, val) { 
     return val == '200px' ? '100%' : '200px'; 
    }); 
});

demo

来源

2012-10-05 20:29:37

jQuery，当具体到位时更改css属性

回答

相关问题