个人中心的侧边栏--用jq实现侧边栏点击一块出现一块其他几块隐藏并且同时改变前面的img图片

Posted 2020-11-03 floweres

实现的效果：

   默认状态下：

点击下面的标题时：

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>