1

我正在尝试创建一个无序列表，其中每个 li 都是一个小“平铺”，只需单击即可展开和折叠（使用 animate() ）。我已经把它放大到了 li 会放大的地方，但我不知道如何再次缩小它。

这是代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="jquery.animate-colors-min.js"></script>


<style type="text/css">
 ul#tiles {
margin:0;
padding:0;
list-style-type:none;
width:300px;
}
ul#tiles li {
float:left;
width:72px;
height:72px;
border:1px solid black;
background:#09F;
margin:10px;
overflow:hidden;
 }
ul#tiles li a { 
}

</style>




<script>
$(document).ready(function() {
    $("li.closed a").click(function(){
        $(this).parent()
            .animate({height:"300px"},{duration: 400, queue: false })
            .animate({width:"300px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#fff"},{duration: 400, queue: false })
            .attr("class","open")
        ;
        $(this).text("Close");
    }); // closes click on "li.closed a"
    $("li.open a").click(function(){
        $(this).parent()
            .animate({height:"72px"},{duration: 400, queue: false })
            .animate({width:"72px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#09f"},{duration: 400, queue: false })
            .attr("class","closed")
        ;           
        $(this).text("Open");
    }); // closes click on "li.closed a"
}); // closes document ready function
</script>



</head>
<body>


<ul id="tiles">
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
<li class="closed"><a href="#">Open</a><br />Lorem ipsum dolor sit amet</li>
</ul>


</body>
</html>
4

2 回答 2

1

检查文本以决定是打开还是关闭它：

$(document).ready(function() {
    $("li.closed a").click(function(){
        if($(this).text() == "Open"){
        $(this).parent()
            .animate({height:"300px"},{duration: 400, queue: false })
            .animate({width:"300px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#fff"},{duration: 400, queue: false })
            .attr("class","open")
        ;
        $(this).text("Close");
        } else {
        $(this).parent()
            .animate({height:"72px"},{duration: 400, queue: false })
            .animate({width:"72px"},{duration: 400, queue: false })
            .animate({backgroundColor:"#09f"},{duration: 400, queue: false })
            .attr("class","closed")
        ;           
        $(this).text("Open");
      }
    }); // closes click on "li.closed a"
}); // closes document ready function

JSFiddle

于 2013-06-28T22:24:22.800 回答
1

您的功能可以通过这种方式完全优化：

$(document).ready(function () {
    $(document).on("click", "li.closed a", function () {
        $(this)
            .parent()
            .animate({
               height: "300px",
               width: "300px",
               backgroundColor: "#fff"
            })
            .attr("class", "open");
        $(this).text("Close");
    }); // closes click on "li.closed a"
    $(document).on("click", "li.open a", function () {
        $(this)
            .parent()
            .animate({
               width: "72px",
               height: "72px",
               backgroundColor: "#09f"
            })
            .attr("class", "closed");
        $(this).text("Open");
    }); // closes click on "li.closed a"
}); // closes document ready function

请注意以下事项：

  • animate()也接受属性的对象进行动画处理
  • 400毫秒是默认计时（通常用“正常”标识），所以可以省略

你可以在这里运行代码：http: //jsfiddle.net/4QmLV/

于 2013-06-28T22:28:44.307 回答