1. 程式人生 > >個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片

個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片

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圖片