jquery - 使用 jQuery 切换宽度

Question

如何用动画切换 div 的宽度？

HTML：

<div id="toggle-button"></div>
<div id="toggle"></div>

CSS：

#toggle{
  height:200px;
  width:200px;
  background:red;
}
#toggle-button{
  height:20px;
  width:20px;
  background:blue;
}

jQuery：

$(document).ready( function(){
  $('#toggle-button').click( function() {
    $('#toggle').toggle(function() {
      $('#toggle').animate({width:"200px"});
    }, function() {
      $('#toggle').animate({width:"300px"});
    });
  });
});

不起作用的示例：http: //jsfiddle.net/ZfHZV/1/

编辑：我的目标是在单击蓝色 div 时更改宽度

score 20 · Accepted Answer

试试这个：

$(document).ready( function(){
    $('#toggle-button').click( function() {
        var toggleWidth = $("#toggle").width() == 300 ? "200px" : "300px";
        $('#toggle').animate({ width: toggleWidth });
    });
});

示例小提琴

score 9 · Accepted Answer

老兄！你的代码有效，你只是不明白它的作用......

  $('#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"});
    });
  });

单击蓝色 div，然后单击红色 div 几次，看看它是如何工作的。

请注意，您最好附加切换点击回调，one而不是click避免多次点击回调：

  $('#toggle-button').one('click', function() {
    $('#toggle').toggle(function() {
        $('#toggle').animate({width:"200px"});
    }, function() {
        $('#toggle').animate({width:"300px"});
    });
  });

现场演示

score 3 · Accepted Answer

有两个 jQuery 方法称为toggle. 一个切换可见性，这在这里不相关。另一个应用点击处理程序，它交替触发函数。这就是你正在使用的。但是，你用错了。

你实际上在做的是等待#toggle-button被点击，然后你绑定一个点击处理程序到#toggle. 所以动画会#toggle在第一次点击后的任何时候出现#toggle-button。（多次点击后情况会变得更加复杂#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"});
});

工作代码（注意，因为你从 200px 开始，第一次点击似乎什么都不做）

score 1 · Accepted Answer

试试这个：它适用于所有版本的 Jquery || jQuery 1.10.1 || 到 || jQuery 2.1.4 ||

脚本

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

score 1 · Accepted Answer

使用 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>

score 0 · Accepted Answer

类型强制警告

使用$("#toggle").width() == 800可能会导致意外的类型强制。

相反，请考虑使用以下内容：

var foo = $("#toggle").width();
var bar = foo === 0 ? "100%" : "0";

请注意===将的值input.width()与数值基元进行比较的类型和值比较运算符0。Asinput.width()求值为原始类型number的值，当它等于0这个条件时将返回true。

使用值比较运算符的做法==避开了 JavaScript 类型系统，这有可能导致意外错误。尽管在条件语句中的危险性较小，但仍然存在意外行为的风险。有关类型强制的更多信息，请参阅本文。

score -1 · Accepted Answer

$('#toggle-button').one('click', function() { $('#toggle').animate({ width: 'toggle'}, 1000); }); 这将 0 切换到您定义的宽度

我试过这个并且工作

$("#searchIcon").click(function(){
var toggleWidth = "0px";
if($("#searchbox").width() == 118)
{
    toggleWidth="0px";
}
else
{
    toggleWidth="120px";
}
$('#searchbox').animate({ width: toggleWidth });

});

jquery - 使用 jQuery 切换宽度

7 回答 7

类型强制警告

Related

Reference