我在想,如果有人能告诉我为什么这不起作用?它只工作一次。我试图用基础的开关对象切换高度div
。当我点击#new标签时,它也可以完美切换。但那不是主意。JavaScript if else change css
var open = 0;
$('#newtopicbutton').click(function() {
if (open === 0) {
$('#new').css({
'height': '440px',
'color': 'white',
'font-size': '44px'
});
open = 1;
} else {
if (open === 1) {
$('#new').css({
'height': '48px',
'color': 'white',
'font-size': '44px'
});
open = 0;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="new" class="large-3 medium-3 small-3 columns" style="padding-top:10px;background:#2f2f2f;margin-top:20px;height:440px;color:white;font-weight:700;font-size:14px !important;">
<div id="newtopicbutton" class="switch small">
<input class="switch-input" style="background:red;" id="exampleSwitch" checked="true" type="checkbox" name="exampleSwitch">
<label class="switch-paddle" for="exampleSwitch">
<span class="show-for-sr float-right">NEW TOPICS</span>
</label>
</div>
</div>
它的工作原理只是一次。
通过使用['.toggleClass()'](http://api.jquery.com/toggleclass/)并将您的CSS移动到样式表类中,您可以大大简化此操作。 – Blazemonger
同意@Blazemonger,但如果没有,然后检查此线程:http://stackoverflow.com/questions/9180087/how-to-handle-change-of-checkbox-using-jquery – Toby
你知道唯一的CSS属性你每改变一次点击都是“高度”?这工作得很好。 – Blazemonger