JS product category list exercise, js product category list

JS product category list exercise, js product category list

CSS:

* {Padding: 0; margin: 0;} ul, li {list-style: none;} body {color: #666; background: # f5f5f5 ;} a {text-decoration: none; color: #666 ;}. cont {width: 400px; margin: 30px auto; position: relative; background: # fff; box-shadow: 2px 2px 5px # e6e2e2 ;}. tit_1 ,. tit_2 ,. tit_3 ,. tit_4 {/* category title style */height: 44px; line-height: 44px; position: relative; padding-left: 40px ;}. tit_1: before {/* small triangle in the title Section */content: ''; position: absolute; left: 15px; top: 12px; border: 10px solid transparent; border-left-color: # ccc ;}. tit_2: before {/* small triangle in the title Section */content: ''; position: absolute; left: 15px; top: 12px; border: 10px solid transparent; border-left-color: # fff ;}. tit_3: before {/* small triangle in the title Section */content: ''; position: absolute; left: 15px; top: 17px; border: 10px solid transparent; border-top-color: # ccc ;}. tit_4: before {/* small triangle in the title Section */content: ''; position: absolute; left: 15px; top: 17px; border: 10px solid transparent; border-top-color: # fff ;}. active {/* List content style */height: 28px; line-height: 28px; padding-left: 40px; cursor: pointer ;}# ul1 {padding: 20px 0 ;}. hidden {/* Hide the list content */display: none ;}. on {/* display list content */display: block ;}

HTML:

<Div class = "cont"> <ul id = "ul1"> <li> 

JS:
<Script type = "text/javascript"> var oUl = document. getElementById ('ul1'); var aUl = oUl. getElementsByTagName ('ul '); var aH = oUl. getElementsByTagName ('h3 '); var aLi = null; var len = aUl. length; for (var I = 0; I <len; I ++) {aLi = aUl [I]. getElementsByTagName ('lil'); for (var j = 0; j <aLi. length; j ++) {aLi [j]. className = 'active'; aLi [j]. onmouseover = function () {// when the mouse passes through the current li, the text color changes this. style. color = '# e4007e';/* alert (4); */} aLi [j]. onmouseout = function () {// move the mouse away from the current li, and the text color is restored to the original. this. style. color = '#666' ;};}; for (var I = 0; I <aH. length; I ++) {aH [I]. index = I; // when the mouse passes through the current h3, the background color and font color change aH [I]. onmouseover = function () {this. style. backgroundColor = '# e4007e'; this. style. color = '# fff'; // determines whether the content in the current list of li is expanded if (aUl [this. index]. className = 'den den ') {this. className = 'tit _ 2'; // The tit_2} else {this. className = 'tit _ 4'; // The tit_4 of the small triangle when the list content is expanded;} aH [I]. onmouseout = function () {this. style. backgroundColor = '# fff'; this. style. color = '#666'; // determines whether the content in the current list of li is expanded if (aUl [this. index]. className = 'den den ') {this. className = 'tit _ 1'; // The tit_1} else {this. className = 'tit _ 3'; // The tit_3 of the small triangle when the list content is expanded;} aH [I]. onclick = function () {// click the current h3. if the content in the list is hidden, it will be displayed; otherwise, it will be hidden if (aUl [this. index]. className = 'den den ') {aUl [this. index]. className = 'on'; this. className = 'tit _ 4';} else {aUl [this. index]. className = 'ddn'; this. className = 'tit _ 2';}/* alert (1); */}; </script>