原生js实现下拉菜单效果

2017-12-14 本文已影响0人 jia林

最近接触Magento后台管理系统，需要是实现一个下拉菜单的功能，之前的项目都是js和jquery混和在一起使用，从未用纯js实现功能，不写不知道，写了才发现自己的不足，失去jquery，就等于没了左膀右臂，看来还是基础不牢，地动山摇。由此想到最近浏览关于IT行业的网站，出现最多的关键词就是C++、Java、Python、php...，javascript这个关键词的出现概率为0.0000001%，身为大前端的我岂能容忍，为了振兴Javascript，我要头悬梁，刺锥股好好学习js。咳咳咳，在吹牛皮就该被打死了，进入正题。。。

首先拿到一个功能，先进行需求分析，里面有什么逻辑

image.png

1、点击时，当前菜单展开，其他菜单关闭
2、点击时，判断是否展开，展开则关闭，关闭则展开
html

<div class="overview-wrapper-static">
    <div class="section-1 sections">
        <div>
            <img class="img-per-cent" alt="Honor7x" src="https://cdnin.huaweipromotion.com/media/wysiwyg/product-overview/Honor-7x/resources/12-12testpic_01.jpg">
        </div>
    </div>
    <div class="section-2 sections">
        <div class="content-left block50-50">
            <div>
                <img class="img-per-cent" alt="Honor7x" src="https://cdnin.huaweipromotion.com/media/wysiwyg/product-overview/Honor-7x/resources/12-12testpic_02.jpg">
            </div>
        </div>
    </div>
    <div class="section-3 sections">
        <h2 class="product-title">Honor&nbsp;7X&nbsp;User&nbsp;Testing&nbsp;Log</h2>
        <div class="select-list-box">
            <div class="select-list" >
                <ul id="getElenId">
                    <li class="list-item">SCREEN
                        <span class="row"></span>
                        <div class="listcontent">
                            <p class="list-text">这里面放内容,目前是测试</p>
                        </div>
                    </li>
                    <li class="list-item">CAMERA
                        <span class="row"></span>
                        <div class="listcontent">
                            <p class="list-text">这里面放内容,目前是测试</p>
                        </div>
                    </li>
                    <li class="list-item">PERFORMANCE
                        <span class="row"></span>
                        <div class="listcontent">
                            <p class="list-text">这里面放内容,目前是测试</p>
                        </div>
                    </li>
                    <li class="list-item">CONCLUSION
                        <span class="row"></span>
                        <div class="listcontent">
                            <p class="list-text">这里面放内容,目前是测试</p>
                        </div>
                    </li>
                </ul>
               
               
            </div>
            <div class="public-line"></div>
        </div>
    </div>
    <div class="section-4 sections">
        <div>
            <img class="img-per-cent" alt="Honor7x" src="https://cdnin.huaweipromotion.com/media/wysiwyg/product-overview/Honor-7x/resources/12-12testpic_04.jpg">
        </div>
    </div>
</div>

<style type="text/css">
* {
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
.overview-wrapper-static .smallheading {
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 20px;
    font-weight: 300;
    color: #212121;
    margin-bottom: 20px;
}

.overview-wrapper-static .img-per-cent {
    display: block;
    border:0;
    width: 100%;
}

.section-3 {
    background: url(https://cdnin.huaweipromotion.com/media/wysiwyg/product-overview/Honor-7x/resources/honor7xbg_02.jpg);
    ;
}

.section-3 .select-list-box {
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.section-3 .select-list li {
    border-top: 2px solid #6d758e;
   
    cursor: pointer;
}
.section-3 .public-line{
     border-top: 2px solid #6d758e;
     padding-bottom: 80px;
}

.section-3 .select-list .row {
    margin-top: 10px;
    float: right;
    display: inline-block;
    width: 30px;
    height: 14px;
    background-image: url(https://cdnin.huaweipromotion.com/media/wysiwyg/product-overview/Honor-7x/resources/honor7xicon.png);
    background-position:  center bottom;
}

.section-3 .product-title {
    text-align: center;
    padding: 30px 0;
    color: #222e54;
    font-size: 40px;
}
.section-3 .list-item {
    text-align: center;
    padding: 30px 0;
    color: #01b2e6;
    font-size: 30px;
}
.section-3 .listcontent {
   display: none;
}
.section-3 .listcontents{
   display:block;
}
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}


</style>

<script type="text/javascript">
window.onload = function() {
    var getElenId = document.getElementById('getElenId');
    var listItem = getElenId.getElementsByClassName('list-item');
      var listContent=getElenId.getElementsByTagName('div');
var listBgPic=getElenId.getElementsByTagName('span');

 


     for(var i=0;i<listItem.length;i++){  //循环历遍onclick事件
             listItem[i].index=i; //input[0].index=0 index是自定义属性

             listItem[i].onclick=function(){
                if(listContent[this.index].className!='listcontents'){
                    for(var i=0;i<listItem.length;i++){  
                  listContent[i].className='listcontent';
                   listBgPic[i].style.backgroundPosition = 'bottom';
               

               };
               listContent[this.index].className='listcontents';
                listBgPic[this.index].style.backgroundPosition = 'top';
                
                }else{
                    for(var i=0;i<listItem.length;i++){  
                  listContent[i].className='listcontent';
                   listBgPic[i].style.backgroundPosition = 'bottom';
                  
                  
               };
               listContent[this.index].className='listcontent';
               listBgPic[i].style.backgroundPosition = 'bottom';
              
                      
                }
               
                

           };
         };
}
</script>

如有不足之处，请多多指点+_+

原生js实现下拉菜单效果

猜你喜欢

热点阅读