侧导航的下拉效果===>>>CSS3的旋转+js代码

最新推荐文章于 2023-01-03 16:08:09 发布

Oner2me

最新推荐文章于 2023-01-03 16:08:09 发布

阅读量370

点赞数

本文链接：https://blog.csdn.net/Oner2me/article/details/80495467

版权

效果图前后对比：

===>>>

HTML代码：

<div class="category" id="category">
            <dl>
                <dt><span>钻石</span><b>></b></dt>
            </dl>
            <dl class="unfold">
                <dt><span>钻戒</span><b>></b></dt>
                <dd>
                    <ol>
                        <li><a href="#">铂金钻戒</a></li>
                        <li><a href="#">30分钻戒</a></li>
                        <li><a href="#">50分钻戒</a></li>
                        <li><a href="#">70分钻戒</a></li>
                        <li><a href="#">克拉克钻戒</a></li>
                    </ol>
                </dd>
            </dl>
            <dl>
                <dt><span>对戒</span><b>></b></dt>
            </dl>
            <dl>
                <dt><span>配饰</span><b>></b></dt>
            </dl>
</div>

CSS效果：

这里是less文件

.category{
      padding:16px 0 28px 38px;
      font-size:14px;
      width:200px;
      border-top:1px solid #000;
      border-bottom:1px solid #000;
      dl{
        margin-top:22px;
        dt{
          position:relative;
          span{
            cursor:pointer;
          }
          b{
            font-size:22px;
            width:16px;
            height:16px;
            transform:rotate(0deg);
            line-height:14px;
            position:absolute;
            top:50%;
            left:-30px;
            margin-top:-9px;
          }
        }
        dd{
          display:block;
          margin-top:12px;
          padding-left:4px;
          ol{
            li{
              margin-top:6px;
              &:first-child{
                margin-top:0;
              }
              a{
                font-size:14px;
                color:#908e8e;
              }
            }
          }
        }
        &:first-child{
          margin-top:0;
        }
        &.unfold{
          padding-bottom:0;
          dt{
            b{
              transform:rotate(90deg);
            }
          }
        }
      }
    }

Js代码：

用Jquery写的

$('#category dl').on('click',function(){
    if($(this).hasClass('unfold')){
        $(this).removeClass('unfold').find('dd').slideUp(1000);
    }else{
        $(this).addClass('unfold').find('dd').slideDown(1000);
    }
});

总结：

写完后才发现，这个功能主要是在Css部分，你要先把两种效果都写好，然后用js实现下点击切换就能实现

写的时候忽略的地方：1】点击时前面的尖角符号，一开始我只写了改变后的效果，当点击后，发现尖角没变化

于是我就写在了Js里面，后来发现这行代码完全可以在 Css中写，就改了回来