jQuery实现的超简单菜单缩放效果

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('+');
  }
  });
  
});

 

 

 

.