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

    实现的效果:

       默认状态下:

    点击下面的标题时:

    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>
  • 相关阅读:
    js之面向对象
    常用功能
    html圆环(该代码非原创,具体出处已不详)
    关于jsonp的一篇文章(传播好的东西)
    当切换select时,获取select选中的值;获取选中的单选按钮的val,判断复选框是否选中
    js类型判断(数字、0、""、undefined、null)
    js获取窗口可视范围的高度、获取窗口滚动条高度、文档内容实际高度
    66
    55
    44
  • 原文地址:https://www.cnblogs.com/floweres/p/9016156.html
Copyright © 2011-2022 走看看