$().hover() 二级菜单的显示与隐藏

不知道这样写对不对，代码会不会太冗余，还请前辈 高手 不吝赐教👩‍💻👨‍💻

  <style>
        #box{
            width: 400px;
            height: 400px;
            margin: auto;
            background-color: #ccc;
            position: relative;
        }
        
        ul>li{
            list-style: none;
            width: 140px;
            height: 40px;
            border: 1px solid rebeccapurple;
            margin-bottom: 2px;
            margin-left: -40px;


            display: flex;
            justify-content: left;
            align-items: center;
        }
        
        .content{
            width: 256px;
            height: 400px;
            top: 0;
            position: absolute;
            margin-left: 144px;

        }
    </style>

    <div id="box">
         <ul>
             <li class="items">导航一 </li>
             <li class="items">导航二</li>
             <li class="items">导航三</li>
         </ul>

         <div class="content" style="background-color: coral;">导航一的内容</div>
         <div class="content" style="background-color: aquamarine;">导航一的内容</div>
         <div class="content" style="background-color: cornflowerblue;">导航一的内容</div>
    </div>

 <script>
        $('.items').hover(function(){  
            $(this).addClass('data'); //鼠标移入添加 className
            var i = $(this).index();
            var j= document.getElementsByClassName('items')[i];
            var liClass = j.getAttribute('class');
            if(liClass = 'items data'){   // class 为items data 时展示 div
              var content = document.getElementsByClassName('content')[i]
              content.style.display = 'block';
         }

        },function(){  
            $(this).removeClass('data');
            var i = $(this).index()
            var content = document.getElementsByClassName('content')[i]
            if(this.className = 'items'){
              content.style.display = 'none';
          }
        })
 </script>