個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片
阿新 • • 發佈:2018-05-09
icon -a 儀器 cor 個人 con 圖片 AC 默認
實現的效果:
默認狀態下:
點擊下面的標題時:
html代碼:
<h2>商品分類</h2> <div class="categories"> <ul class="ulout"> <li> <a href="#"><img src="picture/ulout_add_03.png" />非標設備</a> <div class="ulin"> <a href="#">橡膠塑料</a> <a href="#">橡膠制品</a> <a href="#">冶金鋼材</a> <a href="#">精細化工</a> </div> </li> <li> <a href="#"><img src="picture/ulout_add_03.png" />工控儀器</a> <div class="ulin"> <a href="#">安防監控</a> <a href="#">電工電氣</a> </div> </li> <li> <a href="#"><img src="picture/ulout_add_03.png" />五金工具</a> <div class="ulin"> <a href="#">鉗子</a> <a href="#">夾子</a> </div> </li> </ul> </div>
css:
<style type="text/css"> .categories{ border: 1px solid #e4e4e4; text-align: left; } ul{list-style: none;} a{text-decoration: none;} ul.ulout>li>a{ font-weight: bold; padding-left: 23px; background-position: 10px 7px; } ul.ulout>li>a>img{margin-right: 6px;} ul.ulout>li .ulin a{ font-weight: normal; color: #666666; display: block; background: url(‘./picture/ulin_icon.png‘) no-repeat; padding-left: 30px; background-position: 20px 8px; } .ulin{ display: none; } </style>
js:
<script type="text/javascript"> //先默認第一個li前面的img圖片為加號樣式的圖片,並且裏面的兄弟元素ul是展開的 $("#ulout li>a").eq(0).find("img").attr("src","picture/ulout_add_03.png‘); $("#ulout li>a").eq(0).parent().find(".ulin").slideDown(600); //點擊#ulout li>a時 $("#ulout li>a").click(function(){ $(this).children("img").attr("src","picture/ulout_icon.png"); $(this).parent().siblings().find("img").attr("src","picture/ulout_add_03.png‘); $(this).parent().find(".ulin").slideDown(600); $(this).parent().siblings().find(".ulin").slideUp(600); }) </script>
個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片