jQuery实现的超简单菜单缩放效果
<!-- HTML代码片段 //--> <div id="container"> <ul id="toggle-view"> <li> <h3>title 1</h3> <span>+</span> <p>welcome to gbtags 1</p> </li> <li> <h3>title 2</h3> <span>+</span> <p>welcome to gbtags 2</p> </li> <li> <h3>title 3</h3> <span>+</span> <p>welcome to gbtags 3</p> </li> </ul> </div> <script type='text/javascript' src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"> </script>
/*CSS代码片段*/ #toggle-view{ list-style:none; font-family:arial; font-size:11px; margin:0; padding:0; width:300px; } #toggle-view li{ margin:10px; border-bottom:1px solid #ccc; position:relative; cursor:pointer; padding:10px; } #toggle-view h3{ margin:0; font-size:14px; font-weight:normal; } #toggle-view span{ position:absolute; right:5px;top:0; color:#ccc; font-size:13px; padding:10px; } #toggle-view p{ margin;5px 0; display:none; }
/*Javascript代码片段*/ $(document).ready(function(){ $('#toggle-view li').click(function(){ var text = $(this).children('p'); if(text.is(':hidden')){ text.slideDown('200') $(this).children('span').html('-'); }else{ text.slideUp('200'); $(this).children('span').html('+'); } }); });
.