最近接触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 7X User Testing 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>
- css
<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>
- js
<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>
如有不足之处，请多多指点+_+
