javascript - How to make an element parent of another div forcefully -
i've come 3 problems. know, javascript can fix it. but, don't know javascript well. so, need help.
(1)i've make element "class dropdown" parent div of "div c" forcefully. example, structure:
<div class="a"> <ul> <li class="dropdown"><a href="#">about</li> <li><a href="#">about</li> <li><a href="#">about</li> </ul> </div> <div class="b"></div> <div class="c"></div>
i know, 1 or 2 lines javascript code make that. but, don't know code. so, what's javascript code makeing li.dropdown parent of "div c"?
(2) how close div onclick option? structure:
<a href="#" class="collapse"></a> <div class="main-nav"></div>
by default, main-nav display: none
when, click on collapse link, main-nav div open. , when people click on collapse link again, main-nav close again. can open main-nav javascript. but, can't close it. i've tried way:
for(var a=0; a<document.getelementsbyclassname('collapse').length; a++){ document.getelementsbyclassname('collapse')[a].onclick = function(){ var mainnav = this.parentnode.parentnode.parentnode.parentnode.parentnode.parentnode.getelementsbyclassname('main-nav')[0] if(mainnav.style.display = 'none') mainnav.style.display = 'block'; else mainnav.style.display = 'none'; } }
i think @ below lines there problem. please, me fixing it.
if(mainnav.style.display = 'none') mainnav.style.display = 'block'; else mainnav.style.display = 'none';
(3) how can change background javascript. div defined this:
.main-nav li.dropdown { background: url(../images/nav-arrow.png) 70% center no-repeat; }
i want change background image when people clink on that. i've tried way below. but, won't work :(
for(var a=0; a<document.getelementsbyclassname('dropdown').length; a++){ document.getelementsbyclassname('dropdown')[a].onclick = function(){ var innersubmenu = this.parentnode.parentnode.parentnode.parentnode.parentnode.parentnode.getelementsbyclassname('inner-submenu')[0] dropdown.backgroundimage = 'url(../images/nav-arrow-hover.png)'; if(innersubmenu.style.display = 'none') innersubmenu.style.display = 'block'; else innersubmenu.style.display = 'none'; } }
may be, problem on line:
dropdown.backgroundimage = 'url(../images/nav-arrow-hover.png)';
those questions totally unrelated, believe should have posted them separate questions. anyway, here answers:
(1) - assuming there single element of each class
document.queryselector('.c').appendchild(document.queryselector('.dropdown'));
(2)
if(mainnav.style.display != 'block') mainnav.style.display = 'block'; else mainnav.style.display = 'none';
(3)
dropdown.style.backgroundimage = 'url(../images/nav-arrow-hover.png)';
Comments
Post a Comment