Html点击显隐

2021-07-03 17:34:35 作者：互联网
元素显隐js代码：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
        <style type="text/css">
            #al{color:darkblue;font-size: 20px;width:40px;height:40px;text-align: center;background-color: rgba(255,255,255,0.8);box-shadow: inset 0 0 20px rgba(0,0,0,0.4);margin-top:0px;border-radius: 50%;}
            .dh{display:flex;flex-direction: row;margin-top:50px;}
             i{width:40px;height:40px;border-radius: 50%;background-color: rgba(255,255,255,0.8);box-shadow: inset 0 0 20px rgba(0,0,0,0.4);text-align: center;}
            .box{width:300px;height:60px;display: flex;flex-direction: row;justify-content: space-around ;margin-top:0px;overflow: hidden;}
            b{color:crimson;font-size: 36px;text-align: center;}
            #zs{position: absolute;bottom:35px;right:-45px;color:snow;font-size: 20px;
                       display: none;
                        width: 120px;
                        height: 35px;
                        line-height: 35px;
                        text-align: center;
                        background: green;
                    }
                     
                    #zs:after {
                        content: "";
                        width: 0px;
                        height: 0px;
                        border-top: 10px solid green;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-bottom: 10px solid transparent;
                        display: block;
                        margin-left: 55px;
                 }
                 #dj{position: relative;}
        #dj:hover #zs{display: block;}
</style>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
            <script> 
            $(document).ready(function(){
             $(".box").hide();
              $("#dj").click(function(){
                $(".box").animate({
                  width:'toggle'
                },"slow");
              });
            });
            </script>
    </head>
    <body>
        
        
        <div class="dh">    
            
    
            <div class="box">
            <i><b class="fa fa-apple"></b> </i>
            <i><b class="fa fa-envira"></b> </i>
            <i> <b class="fa  fa-folder-open"></b></i>
            <i><b class="fa fa-heart"></b> </i>
            <i><b class="fa fa-home"></b> </i>
            <i><b class="fa fa-car"></b> </i>
</div>
        <i id="dj"><b class="fa fa-cog" style="font-size: 20px;"></b>
         <p id="zs">我要自学网</p>
         </i>
        </div>
    </body>
</html>
标签：box,显隐,height,width,点击,Html,border,color,255
来源： https://www.cnblogs.com/sf6666/p/14966818.html