[英]Toggle Width of a Div Using Jquery
I want to toggle the width of a div using a button. 我想使用按钮切换div的宽度。 I'm not sure how to properly use an if-else statement to check the CSS, and I'm also not clear on the syntax. 我不确定如何正确地使用if-else语句来检查CSS,而且语法也不清楚。
Let's assume that I have the following: 假设我有以下内容:
CSS 的CSS
.firstDiv {
border:1px solid black;
padding:10px;
width: 80px;
margin:5px;
display:relative;
}
HTML 的HTML
<button id="boxToggle">Change Width</button>
<div class="firstDiv">
<p>This is a paragraph.</p>
</div>
JavaScript 的JavaScript
$("#boxToggle").click(function () {
$("#firstDiv").css("width", "120px");
});
Right now, the JavaScript would only change the width once and not go back, but this still isn't working and I'm assuming that my syntax is wrong. 现在,JavaScript只会更改一次宽度,而不会返回,但是这仍然无法正常工作,我假设我的语法错误。
A JSFiddle of the above can be found at the link. 上面的JSFiddle可以在链接中找到。
https://jsfiddle.net/647ye1pk/ https://jsfiddle.net/647ye1pk/
Any help is appreciated. 任何帮助表示赞赏。
You can use toggleClass
to achieve this effect 您可以使用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>
And if you don't want to use the toggleClass
method try this 而且,如果您不想使用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>
firstDiv is a class not an id (# vs .) try: firstDiv是一个不是id的类(#与。)尝试:
$("#boxToggle").click(function () {
$(".firstDiv").css("width", "120px");
});
It can be as simple as detecting the width your div
has when you click the button, and reacting appropriately: 它可以很简单,只需在单击按钮时检测div
的宽度并做出适当的反应:
$("#boxToggle").click(function() { var fd = $("#firstDiv"); if(fd.css("width")!=="120px") fd.css("width", "120px"); else fd.css("width", "80px"); });
#firstDiv { border: 1px solid black; padding: 10px; width: 80px; margin: 5px; display: relative; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="boxToggle">Change Width</button> <div id="firstDiv"> <p>This is a paragraph.</p> </div>
Through this you do not need to use global variables and toggle functions. 通过这种方式,您无需使用全局变量和切换功能。
you can use this 你可以用这个
$("#boxToggle").click(function () {
var width=$(".firstDiv").css( "width" );
if (width=="80px")
{
$(".firstDiv").css("width","120px");
}
else
{
$(".firstDiv").css("width","80");
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.