我想使用按钮切换 div 的宽度。我不确定如何正确使用 if-else 语句来检查 CSS,而且我也不清楚语法。
假设我有以下内容:
CSS
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
HTML
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
JavaScript
$("#boxToggle").click(function () {
$("#firstDiv").css("width", "120px");
});
现在,JavaScript 只会更改宽度一次,不会返回,但这仍然不起作用,我假设我的语法是错误的。
可以在链接中找到上述的 JSFiddle。
https://jsfiddle.net/647ye1pk/
感谢任何帮助。
最佳答案
可以使用toggleClass
来实现这个效果
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
$("#boxToggle").click(function () {
$(".firstDiv").toggleClass('largeWidth');
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
.largeWidth{
width:120px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
如果你不想使用 toggleClass
方法试试这个
//I need an "if-else" statement in here, but I'm not sure how to use css as a condition
click = 0;
$("#boxToggle").click(function () {
if (click == 0) {
$(".firstDiv").css("width", "120px");
click = 1;
} else {
$(".firstDiv").css("width", "80px");
click = 0;
}
});
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
关于javascript - 使用 Jquery 切换 Div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31480212/