Question

我正在尝试创建一个无序列表，其中每个li都是一个“tile”，可以通过单击来扩展和折叠（使用animate（））。我已经把它放到李将放大的地方，但我无法弄清楚如何将它再缩回。

以下是代码：

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

Answer 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

Answer 2

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

$(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/

单击JQuery中的放大/缩小元素

2 个答案: