Question

请帮忙。我有一个图像库，我想花费每个缩略图显示全长图像，然后点击它回到原来的大小。请给出一些jquery代码的建议。谢谢。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(e) {

$('#wrapper ul li').bind('click', function () {
    $(this).removeClass();
    $(this).fadeIn(500).addClass("applyclass");});

});
</script>
<style>
html, body{margin:0; padding:0; width:100%; height:100%}
#wrapper{background:#0CC; margin:0 auto 0 auto}
#wrapper ul{list-style:none; margin:0 auto 0 auto; padding:0; width:960px;}
#wrapper ul li{display:inline-block; width:227px; height:180px; background:#FC3; margin:5px;}
#wrapper ul li.applyclass{display:block; width:960px; height:300px}
#wrapper ul li.removeclass{display:inline-block; width:227px; height:180px}
</style>
</head>

<body>
<div id="wrapper">
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
</ul>
</div>
</body>
</html>

Answer 1

试试这个脚本，

$(document).ready(function() {

    $('#wrapper ul li').click(function () {
       if($(this).hasClass("applyclass"))
          $(this).removeClass("applyclass");   
       else
          $(this).fadeIn(500).addClass("applyclass");
    });

});

演示：http://jsfiddle.net/8TchT/1/

<强>更新此代码会通过点击其他li的

来缩小li的大小

$(document).ready(function() {

    $('#wrapper ul li').click(function () {
          $('#wrapper ul li').removeClass("applyclass");
          $(this).fadeIn(500).addClass("applyclass");


    });

});

演示：http://jsfiddle.net/8TchT/3/

jquery图片库展开点击任何li

1 个答案: