js触发显示二级导航(一级导航和二级导航分开写)

js触发显示二级导航(一级导航和二级导航分开)(新手写的,记录下自己写js的历程)


html头部


<header>

<div class="header">

<div class="index-bak">

<div class="container">


<div class="flex-1">

  

<div class="logo">

<h1><a href="/"><img src="images/logo.png" alt="网站logo"><span>15练字网</span></a></h1>

</div>


<div class="mblie-nav">


     <div class="sp_nav" id="sjdh"> 

        <span></span>

         <span></span> 

         <span></span> 

       </div>


<div class="nav justify-content-between">


    <div class="nav-item  cur">

        <a href="">首页</a>

    </div>


    <div class="nav-item"  id="dropdown1">

        <a href="" >书法欣赏</a>

       

    </div>


    <div class="nav-item " id="dropdown2" >

        <a href=""  >书法教程</a>


  


    </div>


    <div class="nav-item">

        <a href="">练字问题</a>

    </div>


    <div class="nav-item  " id="dropdown3" >

        <a href="" >练字方法</a>

      

    

    </div>


    <div class="nav-item  " id="dropdown4">

        <a href=""  >硬笔字教程</a>


     


    </div>

</div>


</div>


<div class="nav-search">

    <form action="" class="location" >

        <input type="text" name="" class="input-search form-control" id="" placeholder="搜索您感兴趣的">

        <input type="submit" class="btn  serch-sub" value="搜索">

    </form>


<div class="index-ask">

    <a href="">提问题</a>

</div>



</div>




<div class="nav-login">

<a href="">登陆</a> / <a href="">注册</a>

</div>


</div>



</div>



</div>


<div class="part-dropdown">

     <div class="container">

    <div class="dropdownmenu1" id="dropdownmenu1">

       <div class="navigation">

  <div class="navflex">

        <a class="item" href="#">

            <span class="svg">        

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-journal-medical" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z"/>

                    <path d="M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z"/>

                    <path fill-rule="evenodd" d="M8 4a.5.5 0 0 1 .5.5v.634l.549-.317a.5.5 0 1 1 .5.866L9 6l.549.317a.5.5 0 1 1-.5.866L8.5 6.866V7.5a.5.5 0 0 1-1 0v-.634l-.549.317a.5.5 0 1 1-.5-.866L7 6l-.549-.317a.5.5 0 0 1 .5-.866l.549.317V4.5A.5.5 0 0 1 8 4zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>

                  </svg> 

            </span> 

            <h3>历代碑帖</h3>

            <h5>中国历代经典碑帖</h5>

        </a>

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-journal-text" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z"/>

                    <path d="M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z"/>

                    <path fill-rule="evenodd" d="M5 10.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>

                  </svg>

            </span>

            <h3>练字字帖</h3>

            <h5>选择适合自己的字帖</h5>

        </a>

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-journal-album" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z"/>

                    <path d="M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm3-6.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5v-5z"/>

                    <path fill-rule="evenodd" d="M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5z"/>

                  </svg>


            </span>

            

            <h3>笔墨纸砚</h3>

            <h5>文房四宝,笔、墨、纸、砚</h5>

        

        </a>

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-journal-richtext" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1H2a2 2 0 0 1 2-2z"/>

                    <path d="M2 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H2z"/>

                    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5zm0-2a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm1.639-4.208l1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM6.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>

                  </svg>


            </span>

            

            <h3>书画作品</h3>

            <h5>名人书画,名家作品</h5>

        

        </a>

    </div>

    </div>

    </div>



    <div class="dropdownmenu2" id="dropdownmenu2">

        <div class="navigation">

            <div class="navflex">

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-brush" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path d="M15.213 1.018a.572.572 0 0 1 .756.05.57.57 0 0 1 .057.746C15.085 3.082 12.044 7.107 9.6 9.55c-.71.71-1.42 1.243-1.952 1.596-.508.339-1.167.234-1.599-.197-.416-.416-.53-1.047-.212-1.543.346-.542.887-1.273 1.642-1.977 2.521-2.35 6.476-5.44 7.734-6.411z"/>

                    <path d="M7 12a2 2 0 0 1-2 2c-1 0-2 0-3.5-.5s.5-1 1-1.5 1.395-2 2.5-2a2 2 0 0 1 2 2z"/>

                  </svg> 

            </span>

            <h3>毛笔书法</h3>

            <h5>毛笔书法包含楷书、行书、篆书</h5>

            

        </a>

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-pen" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path fill-rule="evenodd" d="M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z"/>

                    <path fill-rule="evenodd" d="M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z"/>

                    <path d="M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z"/>

                  </svg>

            </span>

            <h3>硬笔行楷</h3>

            <h5>硬笔行楷包含硬笔,行楷、行书</h5>

        </a>

        <a class="item" href="#">

       <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-pen" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path fill-rule="evenodd" d="M5.707 13.707a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391L10.086 2.5a2 2 0 0 1 2.828 0l.586.586a2 2 0 0 1 0 2.828l-7.793 7.793zM3 11l7.793-7.793a1 1 0 0 1 1.414 0l.586.586a1 1 0 0 1 0 1.414L5 13l-3 1 1-3z"/>

                    <path fill-rule="evenodd" d="M9.854 2.56a.5.5 0 0 0-.708 0L5.854 5.855a.5.5 0 0 1-.708-.708L8.44 1.854a1.5 1.5 0 0 1 2.122 0l.293.292a.5.5 0 0 1-.707.708l-.293-.293z"/>

                    <path d="M13.293 1.207a1 1 0 0 1 1.414 0l.03.03a1 1 0 0 1 .03 1.383L13.5 4 12 2.5l1.293-1.293z"/>

                  </svg>

            </span>

            <h3>硬笔楷书</h3>

            <h5>硬笔楷书包含笔画、偏旁、结构</h5>

        </a>

        <a class="item" href="#">

            <span class="svg">

                <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-pencil" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                    <path fill-rule="evenodd" d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"/>

                    <path fill-rule="evenodd" d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"/>

                  </svg>

            </span>

            <h3>少儿硬笔</h3>

            <h5>少儿硬笔包含坐姿、握笔、运笔</h5>

        </a>

    </div>

        </div>

    </div>

        <div class="dropdownmenu3" id="dropdownmenu3">

            <div class="navigation">

                <div class="navflex">

            <a class="item" href="#">

                <span class="svg">

                    <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-pencil-square" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                        <path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456l-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"/>

                        <path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"/>

                      </svg>

                </span>

                <h3>练字技巧</h3>

                <h5>怎样快速掌握练字技巧</h5>

                

            

            </a>

            <a class="item" href="#">

                <span class="svg">

                    <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-easel" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                        <path d="M8.473.337a.5.5 0 0 0-.946 0L6.954 2h2.092L8.473.337zM12.15 11h-1.058l1.435 4.163a.5.5 0 0 0 .946-.326L12.15 11zM8.5 11h-1v2.5a.5.5 0 0 0 1 0V11zm-3.592 0H3.85l-1.323 3.837a.5.5 0 1 0 .946.326L4.908 11z"/>

                        <path fill-rule="evenodd" d="M14 3H2v7h12V3zM2 2a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H2z"/>

                      </svg>

                </span>

                <h3>练字培训</h3>

                <h5>提供业内练字培训班信息</h5>

                

            </a>

            <a class="item" href="#">

                <span class="svg">

                    <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-display" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                        <path d="M5.75 13.5c.167-.333.25-.833.25-1.5h4c0 .667.083 1.167.25 1.5H11a.5.5 0 0 1 0 1H5a.5.5 0 0 1 0-1h.75z"/>

                        <path fill-rule="evenodd" d="M13.991 3H2c-.325 0-.502.078-.602.145a.758.758 0 0 0-.254.302A1.46 1.46 0 0 0 1 4.01V10c0 .325.078.502.145.602.07.105.17.188.302.254a1.464 1.464 0 0 0 .538.143L2.01 11H14c.325 0 .502-.078.602-.145a.758.758 0 0 0 .254-.302 1.464 1.464 0 0 0 .143-.538L15 9.99V4c0-.325-.078-.502-.145-.602a.757.757 0 0 0-.302-.254A1.46 1.46 0 0 0 13.99 3zM14 2H2C0 2 0 4 0 4v6c0 2 2 2 2 2h12c2 0 2-2 2-2V4c0-2-2-2-2-2z"/>

                      </svg>

                </span>

                <h3>练字视频</h3>

                <h5>根据练字视频学习常用字写法</h5>

                

            </a>

            <a class="item" href="#">

                <span class="svg">

                    <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-file-zip" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                        <path fill-rule="evenodd" d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"/>

                        <path fill-rule="evenodd" d="M6.5 8.5a1 1 0 0 1 1-1h1a1 1 0 0 1 1 1v.938l.4 1.599a1 1 0 0 1-.416 1.074l-.93.62a1 1 0 0 1-1.109 0l-.93-.62a1 1 0 0 1-.415-1.074l.4-1.599V8.5zm2 0h-1v.938a1 1 0 0 1-.03.243l-.4 1.598.93.62.93-.62-.4-1.598a1 1 0 0 1-.03-.243V8.5z"/>

                        <path d="M7.5 2H9v1H7.5zm-1 1H8v1H6.5zm1 1H9v1H7.5zm-1 1H8v1H6.5zm1 1H9v1H7.5V6z"/>

                      </svg>

                </span>

                <h3>练字模板</h3>

                <h5>硬笔书法练字模板下载</h5>

            </a>

        </div>

        </div>

            </div>


            <div class="dropdownmenu4" id="dropdownmenu4">

                <div class="navigation">

                    <div class="navflex">

                <a class="item" href="#">

                    <span class="svg">

                        <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-card-list" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                            <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>

                            <path fill-rule="evenodd" d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8zm0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5z"/>

                            <circle cx="3.5" cy="5.5" r=".5"/>

                            <circle cx="3.5" cy="8" r=".5"/>

                            <circle cx="3.5" cy="10.5" r=".5"/>

                          </svg>

                    </span>

                    <h3>汉字笔画</h3>

                    <h5>中国汉字拼音、笔画、笔顺查询</h5>

                    </a>

                <a class="item" href="#">

                    <span class="svg">

                        <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-card-heading" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                            <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>

                            <path fill-rule="evenodd" d="M3 8.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>

                            <path d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-1z"/>

                          </svg>

                    </span>

                    <h3>汉字释义</h3>

                    <h5>中国繁体字含义解释和查询</h5>

                    </a>

                <a class="item" href="">

                    <span class="svg">

                        <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-card-checklist" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                            <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>

                            <path fill-rule="evenodd" d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>

                          </svg>

                    </span>

                    <h3>基本笔画</h3>

                    <h5>中国汉字28个笔画详解</h5>

                    </a>

                <a class="item" href="">

                    <span class="svg">

                        <svg width="2em" height="2em" viewBox="0 0 16 16" class="bi bi-card-text" fill="currentColor" xmlns="http://www.w3.org/2000/svg">

                            <path fill-rule="evenodd" d="M14.5 3h-13a.5.5 0 0 0-.5.5v9a.5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>

                            <path fill-rule="evenodd" d="M3 5.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3 8a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9A.5.5 0 0 1 3 8zm0 2.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5z"/>

                          </svg>

                    </span>

                    <h3>成语大全</h3>

                    <h5>中国四字成语故事,成语解释</h5>

                    

                </a>

            </div>

            </div>

                </div>


            </div>



</div>


</div>


</header>


css部分二级导航用绝对定位写,让其展示在一级导航的下面,然后调整好样式进行隐藏,样式我就不写出来了,会的自然懂,不会的百度绝对定位怎么写


image

上js,这个第一次写,写的有点烂(自己都觉得烂)


//首页耳机导航的隐藏与显示

window.onload=function(){


  var dropdown1 = document.getElementById("dropdown1");

  var dropdown2 = document.getElementById("dropdown2");

  var dropdown3 = document.getElementById("dropdown3");

  var dropdown4 = document.getElementById("dropdown4");

  var dropdownmenu1 = document.getElementById("dropdownmenu1");

  var dropdownmenu2 = document.getElementById("dropdownmenu2");

  var dropdownmenu3 = document.getElementById("dropdownmenu3");

  var dropdownmenu4 = document.getElementById("dropdownmenu4");



  dropdown1.onmouseover= function(){

    dropdownmenu1.style.display="block";

  }

  dropdownmenu1.onmouseover= function(){

    dropdownmenu1.style.display="block";

  }

  dropdownmenu1.onmouseout= function(){

    dropdownmenu1.style.display="none";

  }

  dropdown1.onmouseout= function(){

    dropdownmenu1.style.display="none";

  }

  

 dropdown2.onmouseover= function(){

    dropdownmenu2.style.display="block";

  }

  dropdownmenu2.onmouseover= function(){

    dropdownmenu2.style.display="block";

  }

  dropdownmenu2.onmouseout= function(){

    dropdownmenu2.style.display="none";

  }

  dropdown2.onmouseout= function(){

    dropdownmenu2.style.display="none";

  }

  

  dropdown3.onmouseover= function(){

    dropdownmenu3.style.display="block";

  }

  dropdownmenu3.onmouseover= function(){

    dropdownmenu3.style.display="block";

  }

  dropdownmenu3.onmouseout= function(){

    dropdownmenu3.style.display="none";

  }

  dropdown3.onmouseout= function(){

    dropdownmenu3.style.display="none";

  }

  

  dropdown4.onmouseover= function(){

    dropdownmenu4.style.display="block";

  }

  dropdownmenu4.onmouseover= function(){

    dropdownmenu4.style.display="block";

  }

  dropdownmenu4.onmouseout= function(){

    dropdownmenu4.style.display="none";

  }

  dropdown4.onmouseout= function(){

    dropdownmenu4.style.display="none";

  }

  


}


微信扫码咨询
建站咨询
cache
Processed in 0.005623 Second.