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屬性

回答

相關問題