Question

现在我正在尝试编写一个jquery函数，它允许我在单击它时展开div，然后在再次单击它时将其返回到其初始大小。

我尝试添加一个按钮以使其缩回，但因为当我点击它时脚本认为我也点击了父div并再次展开。理想情况下，我想在没有按钮的情况下这样做。

我得到的代码就在这里 -

（jsfiddle）：https://jsfiddle.net/Nikf/wykL6u7u/9/

<div class="grid">
        <div class="block" id="block1">
            <button class="retractor" id="ret1">back</button>
        </div>
        <div class="block" id="block2">2</div>
        <div class="block" id="block3">3</div>
        <div class="block" id="block4">4</div>
        <div class="block" id="block5">5</div>
        <div class="block" id="block6">6</div>
</div>

CSS

*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
}

.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}

.block{
    width: 33.3%;
    height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}

.retractor{
    width: 50px;
    height: 50px;
    padding: 10px 0;
    text-align: center;
    background-color: #FF0000;
    color: #FFFFFF;
    font-family: 'Open Sans', sans-serif;

    position: absolute;
    bottom: 30px;
    right: 30px;
}

#block1{
    background-color: #222222;
}           

#block2{
    background-color: #999999;
}           

#block3{
    background-color: #5555555;
}           

#block4{
    background-color: #999999;
}   

#block5{
    background-color: #333333;
}       

#block6{
    background-color: #CCCCCC;

脚本

$('#block1').click(function(){
    $('#block1').animate({
        width: '100%',
        height: '100%'
    });
});

$('#block1').click(function(){
    $('#block1').animate({
        width: '33.3%',
        height: '50%'
    });
});

Answer 1

您可以将jQuery toggleClass与CSS转换结合使用以获得相同的结果。检查https://jsfiddle.net/wykL6u7u/11/，看看是否符合您的需求。

我做了什么：

.block {
  width: 33.3%;
  height: 50%;
// ...
  transition: all 1s;
}

.block.expanded {
  width: 100%;
  height: 100%;
  transition: all 1s;
}

JS只是班级切换：

$('#block1').click(function(){
        $(this).toggleClass("expanded");
});

Answer 2

我建议使用＆＃34; toggleClass＆＃34;并依赖于CSS类而不是硬编码的CSS值。同意@ sebastian-wramba

事情是我们根本不需要这里的后退按钮。我把它拿出来的理解是操作会更喜欢它不在那里，而是点击div进行切换。如果我没有正确阅读要求，欢迎反馈。

https://jsfiddle.net/e15kxkdr/3/

<div class="grid">
      <div class="block" id="block1">1</div>
      <div class="block" id="block2">2</div>
      <div class="block" id="block3">3</div>
      <div class="block" id="block4">4</div>
      <div class="block" id="block5">5</div>
      <div class="block" id="block6">6</div>
</div>

.grid{
    width: 100%;
    height: 100%;
    /*background-color: #114411;*/
}

.block{
    width: 33.3%;
  height: 50%;
    float: left;
    color: #FFFFFF;
    position: relative;
}
.nodisplay {
  display: none;

}

$('.grid').on("click", "div", function(){
        $(this).toggleClass("grid")
        $(this).toggleClass("block")
        $(this).siblings().toggleClass("nodisplay")
    })

更新：我改变了这个以解决主元素＆＃34; grid＆＃34;通过jquery＆＃34; on＆＃34;子元素而不是使用单独的类。然后我添加了一个新课程＆＃34; nodisplay＆＃34;隐藏其他元素。

Answer 3

所以在考虑之后我就这样做了。它进行2次计算，找出网格的宽度和高度的百分比，并根据它进行动画制作。我将它设置为基于网格点击进行扩展和收缩，但如果您想使用该按钮，只需将点击绑定更改回后退按钮ID。

$('.grid').click( function() {
  var heightPercentage = ( 100 * parseFloat($('.grid').css('height')) / parseFloat($('.grid').parent().css('height')) ) + '%';  
  var widthPercentage = ( 100 * parseFloat($('.grid').css('width')) / parseFloat($('.grid').parent().css('width')) ) + '%'; 
  var toggleWidth = widthPercentage === "100%" ? "33%" : "100%";
  var toggleHeight = heightPercentage === "100%" ? "50%" : "100%";
  $('.grid').animate({ 
    width: toggleWidth,
    height: toggleHeight
  });       
});

https://jsfiddle.net/bgarrison25/o7k2y25q/1

Answer 4

试试这个：

$(document).ready(function(){
     var expand = true;
     $('#block1').click(function(){
         var width='33.3%', height="50%";
         if(expand){
            width='100%';
            height='100%';
            expand=false;
         }else{
            expand=true;
         }
        $('#block1').animate({
           width: width,
           height: height
        });
     });

});

Answer 5

尝试使用Array.prototype.reverse()

在数组中存储值

我认为@BillGarrison是正确的。没有解释它不是明显的代码是如何工作的。

说明：

方法是＆＃34;切换＆＃34;程序。使用arr[0]处的值进行处理;反向arr;在arr[0]使用值进行下一个过程;反转arr。

可以在不使用Array.prototype.reverse()的情况下实施该方法;使用0和1，undefined;见Has .toggle() been deprecated in the latest jQuery releases?。

方法也可以扩展为循环，或连续切换n值，一旦所有数组项都被迭代，返回初始值。

    var arr = [
      ["100%", "100%"],
      ["33.3%", "50%"]
    ];

    $("#block1").click(function() {
          $(this).animate({
            // at initial click, set `width` to `arr[0][0]` : `100%`,
            // set `height` to `arr[0][1]` : `100%`
            // reverse `arr`
            // at second click `arr[0]` : `["33.3%", "50%"]`;
            // set `width` to `arr[0][0]` : `33.3%`
            // set `height` to `arr[0][1]` : `50%`;
            // repeat procedure
            width: arr[0][0],
            height: arr[0][1]
          }, function() {
            arr.reverse()
          });
    })

jsfiddle https://jsfiddle.net/wykL6u7u/14/

Answer 6

我建议你改变逻辑。如果添加特定的类并让CSS执行动画，则会更容易。

$('.block').click(function(ev){
    $(ev.target).toggleClass('active');
});

这样您就可以从.block元素中删除按钮。

将动画和新类添加到CSS：

.block{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.block.active{
    width: 100%;
    height:100%;
}

我还没有测试过这段代码。我希望它有效

- 编辑 -

ev.target不是jQuery元素。我将它包装在$（ev.target）中，否则它没有.toggleClass（）;

如何将此jQuery函数转换为“if”语句

6 个答案: