javascript - How to assign a class and toggle a expandable menu item -
$('.mybutton').click(function() { var vstr = "2.1"; var vulsize = $("#uspstyle li:not(li li)").size(); var vulsubsize; if (vstr.indexof('.') !== -1) { var vsplit = vstr.split("."); var vfirst = vsplit[0]; var vsecond = vsplit[1]; console.log(vfirst); //first number console.log(vsecond); //second number console.log(vulsize); //size of parent ul if (vfirst <= vulsize) { //if first number less or equal parent ul size //{need help}remove 'current' class existing parent li $("#uspstyle li:eq(" + vfirst + ")").addclass("current"); //{need help}add 'current' class parent li vulsubsize = ""; //{need help}get size of sub ul inside above li if (vsecond <= vulsubsize) { //if number less or equal size of sub ul $("#uspstyle li:eq(" + vfirst + ")").find("ul").slidetoggle(); //{need help}expand sub ul inside li $("#uspstyle li:eq(" + vfirst + ")").find("ul li:eq(" + vsecond + ")").addclass("current"); //{need help}add 'current class sub ul li $('.dispartbody').addclass('hidecontent'); //{need help}hide content var element = $("#uspstyle li:eq(" + vfirst + ")").find("ul li:eq(" + vsecond + ")").attr("data-toggle"); //{need help}get class of li corresponds body class $(element).removeclass('hidecontent'); //{need help}show content corresponds element } } } else { //{need help}remove 'current' class existing parent li $("#uspstyle li:eq(" + vfirst + ")").addclass("current"); //{need help}add 'current' class parent li $('.dispartbody').addclass('hidecontent'); //{need help}hide content var element = $("#uspstyle li:eq(" + vfirst + ")").attr("data-toggle"); //{need help}get class of li corresponds body class $(element).removeclass('hidecontent'); //{need help}show content corresponds element } });
fiddle: http://jsfiddle.net/5qweu58f/6/
for example, if vstr
2.1
"care" li
should lose current
class , "bc" li
should current
class. "our link" li
should current
class , <div class="tf1slink2 dispartbody hidecontent"><tf1stext02>this second link sublink 1</tf1stext02></div>
should displayed because corresponds first li of sub ul second li of parent ul.
please me complete script above accomplish that. removeclass , addclass not working @ me.
i trying replicate click event through page load event. 2.1
in url, example: www.mysite1.com/mypage.aspx?id=9090&menuid=2.1
only minor edit:
if (vfirst <= vulsize) { // remove .current every top level sure $("#uspstyle li a").removeclass("current"); // next line accomplishes 2 goals: // adds .current tag inside correct li (you adding li) // gets size vulsubsize (you setting "" reason) vulsubsize = $("#uspstyle > li:eq(" + (vfirst-1) + ") a").addclass("current").size();
you can see above i've specified li
has direct descendant of $("#uspstyle")
when add .current
, because there other lower lever children should not applied to. use (vfirst-1)
- because :eq()
works on index basis, 1
in string equates 0th element.
corrected fiddle
for second level (after edits), want use
$("#uspstyle > li:eq(" + vfirst + ") > ul > li:eq(" + vsecond + ") a").addclass("current");
Comments
Post a Comment