zoukankan      html  css  js  c++  java
  • 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{
    		 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>
    

  • 相关阅读:
    poj 2251 Dungeon Master
    poj 2488 A Knight's Journey
    poj 3349
    poj 2442
    poj 3274 Gold Balanced Lineup
    优先队列
    广州华盟信息科技有限公司
    山东山大华天软件有限公司
    RvmTranslator6.5 is released
    PipeCAD之管道标准库PipeStd(2)
  • 原文地址:https://www.cnblogs.com/wani/p/6834376.html
Copyright © 2011-2022 走看看