在JQuery中点击放大/缩小元素

我试图创建一个无序列表，其中每个li都是一个可以通过点击展开和折叠（使用animate（））的小“瓦片”。我已经知道李会放大的地方，但我无法弄清楚如何将它缩小。在JQuery中点击放大/缩小元素

下面的代码：

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

来源

2013-06-28 Patrick J. Riepe

是否像在jQuery UI中实现的Accordion？ – user1648170

检查，以决定是否打开或关闭文本：

$(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-28 22:24:22 ic3b3rg

你的功能可以以这种方式被完全优化：

$(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-28 22:28:44

太美了！我知道我必须使用.on，但我的语法错了。现在，当我打开一个新的“瓷砖”时，我也想要关闭所有其他的“瓷砖”。我怎么做？谢谢！ –

提示：让我们检索与当前版本不同的所有li :) –

@ PatrickJ.Riepe我最初在回答中也有'on'，但之后我修改了它，因为您根本不必使用它。只需一个处理程序就足够了，您可以推广大量的代码。另外，如果按照'on'进行操作，不要将其绑定到文档，而是随时将其绑定到存在于DOM中的容器，例如ul'＃tiles'的id。 – PSL

在JQuery中点击放大/缩小元素

回答

相关问题