jQuery手风琴菜单的制作

jQyery 手风琴

HTML代码

<div id="Accordion">
  	 
  	 <div>
  	 	  <p>导航一</p>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
  	 </div>
      <div>
  	 	  <p>导航一</p>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
  	 </div>
  	  <div>
  	 	  <p>导航一</p>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
  	 </div>
      <div>
  	 	  <p>导航一</p>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
          <div>导航选项</div>
  	 </div>
  </div>

css代码

  *{
		margin: 0;
		padding: 0;
	}
	#Accordion{
		width: 260px;
		background: #00BFFF;
		margin: 200px auto;
        text-align: center;
        
	}
	#Accordion>div>p{
		background:#326ea5;
        border-bottom:1px #fff solid;
        height:50px;
        text-align: center;
        color: #fff;
        line-height: 50px;

	}
    #Accordion>div>div{
    	display: none;
        
        border-bottom:1px #fff solid;
        height: 40px;
        line-height: 40px;
    }

jQuery 代码

 <script type="text/javascript">
 
      $("#Accordion>div>p").click(function(){
         $(this).nextAll().slideDown().end().parent().siblings().children("div").hide();
      });
      $("#Accordion>div>p").mousemove(function(){
      	$(this).css("background","#f47920")
      });
      $("#Accordion>div>p").mouseout(function(){
      	$(this).css("background","#326ea5")
      });
  </script>