javascript - Unable to add new color class to first sub - menu item when outer menu item is opened in accordion -
here fiddle:
http://jsfiddle.net/d3su54rt/2/
i have used accordion implement menu sub-menus. looking everytime outer menu item clicked, want first item (first child) highlight red if isnt clicked. , when click on other menu item, should highlight 1 clicked. , when open outer menu item again, default first 1 should highlight again. trying add class innermenuitemonclick based on specific accordion open tab.
here html:
<div id="accordion"> <h3 class="outermenuitem">outeritem1</h3> <ul id="statusid"> <li><a class="innermenuitem" href="#!">inner item 1</a></li> <li><a class="innermenuitem" href="#!">inner item 2</a></li> <li><a class="innermenuitem" href="#!">inner item 3</a></li> </ul> <h3 class="outermenuitem">outeritem2</h3> <ul id="networkid"> <li><a class="innermenuitem" href="#!">inner item 1</a></li> <li><a class="innermenuitem" href="#!">inner item 2</a></li> </ul>
here jquery:
$("#accordion").accordion({collapsible:true, active:0, heightstyle: "content"}); $(document).on("click",".outermenuitem",function(){ var currentlyactive=$( "#accordion" ).accordion( "option", "active" ); console.log("current tab no. "+currentlyactive); if(currentlyactive===0){ console.log($("#statusid li:first-child").text()); $("#statusid li:first-child").addclass("innermenuitemonclick"); } else if(currentlyactive===1){ $("#networkid li:first-child").addclass("innermenuitemonclick"); } else { $("#protocolparameters").load("/404.html .someerror"); } }); $(document).on("click",".innermenuitem",function () { $(".innermenuitem").removeclass("innermenuitemonclick"); $(this).addclass("innermenuitemonclick"); });
here underlying css:
#accordion .ui-icon{ display:none; } #accordion .ui-accordion-header{ height:30px; position: relative; z-index: 3; width:200px; } #accordion .ui-accordion-header:hover{ color:#eb5e13; } #accordion .ui-accordion-header .ui-state-active{ color:#eb5e13; } #accordion .ui-accordion-content { position: relative; z-index: 6; width:180px; color:#eb5e13; } #accordion .ui-accordion-header:active{ color:#eb5e13; } a{ color: #3f3f4e; font-weight: bold; padding-left:15px; } a.innermenuitem{ color: #363545; } a.innermenuitemonclick{ color:#eb5e13 !important; }
you adding innermenuitemonclick class li tag, css a.innermenuitemonclick, means apply a tag class.
to consistent use of class on a tag click handler on innermenuitem links, should add "a" css selector, adding class a tag directly:
$("#statusid li:first-child a").addclass("innermenuitemonclick");
this requires change outermenuitem handler remove style on clicked innermenuitem. added top of handler:
$(".innermenuitem").removeclass("innermenuitemonclick");
here update fiddle 2 line change:
Comments
Post a Comment