如何分配類和切換一個擴展菜單項

Question

$('.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 the parent UL 
     if (vFirst <= vULSize) { //if the first number is less than or equal to the parent UL size 
      //{need help}remove 'current' class from the existing parent LI 
      $("#uSPStyle li:eq(" + vFirst + ")").addClass("current"); //{need help}add the 'current' class to the parent LI 
      vULSubSize = ""; //{need help}get the size of the sub UL inside the above LI 
      if (vSecond <= vULSubSize) { //if the number is less than or equal to the size of the sub UL 
       $("#uSPStyle li:eq(" + vFirst + ")").find("ul").slideToggle(); //{need help}expand the sub UL inside the LI 
       $("#uSPStyle li:eq(" + vFirst + ")").find("ul li:eq(" + vSecond + ")").addClass("current"); //{need help}add the 'current class to the sub UL LI 
       $('.dispArtBody').addClass('hideContent'); //{need help}hide all content 
       var element = $("#uSPStyle li:eq(" + vFirst + ")").find("ul li:eq(" + vSecond + ")").attr("data-toggle"); //{need help}get the class of the LI which corresponds to the body class 
       $(element).removeClass('hideContent'); //{need help}show that content which corresponds to the element 
      } 
     } 
    } 
    else { 
     //{need help}remove 'current' class from the existing parent LI 
     $("#uSPStyle li:eq(" + vFirst + ")").addClass("current"); //{need help}add the 'current' class to the parent LI 
     $('.dispArtBody').addClass('hideContent'); //{need help}hide all content 
     var element = $("#uSPStyle li:eq(" + vFirst + ")").attr("data-toggle"); //{need help}get the class of the LI which corresponds to the body class 
     $(element).removeClass('hideContent'); //{need help}show that content which corresponds to the element 
    } 
}); 

小提琴：http://jsfiddle.net/5qweu58f/6/

例如，如果vStr是2.1那麼「照顧」 LI應該失去的current級和「BC」 LI應該得到的current類。 「我們的鏈路」LI也應該得到current類，應該顯示<div class="tf1SLink2 dispArtBody hideContent"><tf1SText02>This is for second link sublink 1</tf1SText02></div>，因爲它對應於UL UL的第二LI的子UL的第一LI。

請幫我完成上面的腳本來完成。 removeClass和addClass對我來說根本不起作用。

我只是試圖通過頁面加載事件複製單擊事件。所以2.1將在URL，例如：www.mysite1.com/mypage.aspx?id=9090&menuid=2.1

Answer 1

只是一個小編輯：

if (vFirst <= vULSize) { 
    // remove .current from every top level just to be sure 
    $("#uSPStyle li a").removeClass("current"); 

    // next line accomplishes two goals: 
    // adds .current to the a tag inside the correct li (you were adding it to the li) 
    // gets the size for vULSubSize (you were setting this to "" for some reason) 
    vULSubSize = $("#uSPStyle > li:eq(" + (vFirst-1) + ") a").addClass("current").size(); 

你可以看到上面我所指定的li必須的$("#uSPStyle")直系後裔，當我們加.current，這是因爲還有其他低槓桿的孩子，這不應該適用。我們現在也使用(vFirst-1) - 因爲:eq()在索引的基礎上工作，1在字符串中相當於第0個元素。

更正fiddle

---

對於第二級（編輯之後），你會想用

$("#uSPStyle > li:eq(" + vFirst + ") > ul > li:eq(" + vSecond + ") a").addClass("current"); 

http://jsfiddle.net/5qweu58f/9/