jquery實現左側折疊菜單
阿新 • • 發佈：2018-07-12
ant htk srx sbc gop ddc dci aci sat
實現代碼如下：
<!-- jquery實現左側折疊菜單 --> <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #container{ width:200px; height:500px; border:1px solid red; } .header{ background-color:blue; } .content{ min-height:50px; } .hide{ display:none; } </style> </head> <body> <div id="container"> <div class="item"> <div class="header">菜單1</div> <div class="content">內容1</div> </div> <div class="item"> <div class="header">菜單2</div> <div class="content hide">內容2</div> </div> <div class="item"> <div class="header">菜單3</div> <div class="content hide">內容3</div> </div> <div class="item"> <div class="header">菜單4</div> <div class="content hide">內容4</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(‘.header‘).click(function(){ //方式一 全局視圖 // $(‘.content‘).addClass(‘hide‘); //給所有content添加hide // $(this).next().removeClass(‘hide‘); //給點擊對象移除hide //方式二 局部視圖 //篩選器的方法next(),prev(),children(),parent(),find(),siblings() // $(this).next().removeClass(‘hide‘); // $(this).parent().siblings().find(‘.content‘).addClass(‘hide‘); //方式三 局部視圖+鏈式編程 $(this).next().removeClass(‘hide‘).parent().siblings().find(‘.content‘).addClass(‘hide‘); }); </script> </body> </html>
jquery實現左側折疊菜單