使用 jQuery 切换宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10781620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle width with jQuery
提问by Puyol
How do I toggle the width of a div with animation?
如何使用动画切换 div 的宽度？
HTML:
HTML：
<div id="toggle-button"></div>
<div id="toggle"></div>?
css:
css：
#toggle{
height:200px;
width:200px;
background:red;
}
#toggle-button{
height:20px;
width:20px;
background:blue;
}
jQuery:
jQuery：
$(document).ready( function(){
$('#toggle-button').click( function() {
$('#toggle').toggle(function() {
$('#toggle').animate({width:"200px"});
}, function() {
$('#toggle').animate({width:"300px"});
});
});
});?
Example that doesn't work: http://jsfiddle.net/ZfHZV/1/
不起作用的例子：http: //jsfiddle.net/ZfHZV/1/
Edit: My goal is to change the width when I click on the blue div
编辑：我的目标是在单击蓝色 div 时更改宽度
回答by Rory McCrossan
Try this:
尝试这个：
$(document).ready( function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
$('#toggle').animate({ width: toggleWidth });
});
});
回答by gdoron is supporting Monica
Dude! your code works, you just don't understand what it does...
伙计！你的代码有效，你只是不明白它的作用......
$('#toggle-button').click( function() { // Execute when the toggle button is clicked.
$('#toggle').toggle(function() { // Attach toggle function that fire different
// callback when clicked.
$('#toggle').animate({width:"200px"});
}, function() {
$('#toggle').animate({width:"300px"});
});
});
Click on the blue div and then on the red div couple of time and see how it works.
单击蓝色 div，然后单击红色 div 几次，看看它是如何工作的。
Note that you better attach the toggle click callbacks with oneinstead of clickto avoid multiple callback of clicks:
请注意，您最好将切换点击回调附加到one而不是click避免多次点击回调：
$('#toggle-button').one('click', function() {
$('#toggle').toggle(function() {
$('#toggle').animate({width:"200px"});
}, function() {
$('#toggle').animate({width:"300px"});
});
});
回答by lonesomeday
There are two jQuery methods called toggle. One toggles visibility, which isn't relevant here. The other applies a click handler, which fires functions alternately. This is what you are using. However, you're using it wrong.
有两个 jQuery 方法称为toggle. 一个切换可见性，这在这里不相关。另一个应用点击处理程序，交替触发功能。这就是你正在使用的。但是，您使用它是错误的。
What you're actually doing is waiting for #toggle-buttonto be clicked, then you bind a click handler to #toggle. So the animation would occur whenever #togglewas clicked after the first time #toggle-buttonwas clicked. (The situation would get more complicated after multiple clicks on #toggle-button.
你实际上在做的是等待#toggle-button被点击，然后你将一个点击处理程序绑定到#toggle. 因此，#toggle在第一次单击后，只要单击就会发生动画#toggle-button。（多次点击后情况会变得更加复杂#toggle-button。
You want to use toggledirectly on #toggle-button:
你想toggle直接使用#toggle-button：
$('#toggle-button').toggle(function() { //fired the first time
$('#toggle').animate({width:"200px"});
}, function() { // fired the second time
$('#toggle').animate({width:"300px"});
});
Working code(nb that since you start at 200px, the first click appears to do nothing)
工作代码（注意，因为你从 200px 开始，第一次点击似乎什么也没做）
回答by Mr Chaitanya
Try This: It Work on All versions of Jquery || jquery 1.10.1 || to || jquery 2.1.4 ||
试试这个：它适用于所有版本的 Jquery || jquery 1.10.1 || 到 || jquery 2.1.4 ||
Script
脚本
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready( function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#toggle").width() == 800 ? "0px" : "800px";
$('#toggle').animate({ width: toggleWidth });
});
});
</script>
$(document).ready( function(){
$('#toggle-button').click( function() {
var toggleWidth = $("#toggle").width() == 800 ? "0px" : "800px";
$('#toggle').animate({ width: toggleWidth });
});
});#toggle{
height:200px;
width:0px;
background:red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Toggle Width with jQuery</h1>
<input id="toggle-button" type="button" value="Click me!"/>
<div id="toggle"></div>回答by eye-wonder
Using JQuery 2.1.1 and setting width and transition with CSS. Also works with percentage width, color change, etc.
使用 JQuery 2.1.1 并使用 CSS 设置宽度和过渡。也适用于百分比宽度、颜色变化等。
$('#button-enlarge').on('click', function () {
$('.box').toggleClass('expanded');
});.box.expanded {
background-color: #e99;
transition: all .3s;
width: 100%;
}
.box {
width: 40%;
transition: all .3s;
background-color: #f00;
color: #fff;
height: 140px;
}
#button-enlarge {
padding: 10px 15px;
border: 1px solid #999;
display: inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-enlarge">Click here</div>
<div class="box">box</div>回答by Arielle Adams
Type Coercion Warning
类型强制警告
Using $("#toggle").width() == 800can result in unexpected type coercion.
使用$("#toggle").width() == 800可能会导致意外的类型强制。
Instead, consider using the following:
相反，请考虑使用以下内容：
var foo = $("#toggle").width();
var bar = foo === 0 ? "100%" : "0";
Notethe type and value comparison operator ===comparing the value of input.width()to the numerical primitive 0. As input.width()evaluates to a value of the primitive type number, when it is equal to 0this condition will return true.
请注意===将 的值input.width()与数字基元进行比较的类型和值比较运算符0。Asinput.width()计算原始类型number的值，当它等0于此条件时将返回true。
The practice of using a value comparison operator ==side-steps the JavaScript type system, which has the potential to lead to unexpected bugs. Although it is less dangerous within a conditional statement, there is still a risk of unexpected behavior. Please see this article for more information on type coercion.
使用值比较运算符的做法==回避了 JavaScript 类型系统，这有可能导致意外错误。尽管在条件语句中危险性较小，但仍然存在意外行为的风险。有关类型强制的更多信息，请参阅这篇文章。
回答by Alexandre Ribeiro
$('#toggle-button').one('click', function() {
$('#toggle').animate({ width: 'toggle'}, 1000);
});
this toggle 0 to your defined width
$('#toggle-button').one('click', function() {
$('#toggle').animate({ width: 'toggle'}, 1000);
});
此切换 0 到您定义的宽度
i tried this and work
我试过这个并且工作
$("#searchIcon").click(function(){
var toggleWidth = "0px";
if($("#searchbox").width() == 118)
{
toggleWidth="0px";
}
else
{
toggleWidth="120px";
}
$('#searchbox').animate({ width: toggleWidth });
});
});
