jQuery的toggleclass延遲時間

這裏的填充菜單條碼

private void PopulateMenu() 
    { 
     List<BOMsMenu> ListMenuParent = new List<BOMsMenu>(); 
     List<BOMsMenu> ListMenuChild = new List<BOMsMenu>(); 
     DACommon common = new DACommon(); 
     ListMenuParent = common.GetParentMenu(UserLogin.AuthorityAccessID, UserLogin.UserName); 
     string innerHTML = string.Empty; 

     if (common.MsgCode == 0) 
     { 
      common = new DACommon(); 
      List<int> ListParentID = (from a in ListMenuParent 
             where a.IsParent == true 
             select a.IDMenu).ToList(); 

      ListMenuChild = common.GetChildMenu(ListParentID, UserLogin.AuthorityAccessID); 
      if (common.MsgCode == 0) 
      { 
       for (int i = 0; i < ListMenuParent.Count; i++) 
       { 
        if (!ListMenuParent[i].IsParent) 
        { 
         innerHTML += "<li><a href=\"" + ListMenuParent[i].FormName + "\" class=\"no-sub\"> " + ListMenuParent[i].MenuName + "</a></li>" + Environment.NewLine; 
        } 
        else 
        { 
         innerHTML += "<li class=\"has-sub\"><a href=\"" + ListMenuParent[i].FormName + "\">" + ListMenuParent[i].MenuName + "<span class=\"sub-arrow\"></span></a>" + Environment.NewLine + "<ul>" + Environment.NewLine; 
         for (int j = 0; j < ListMenuChild.Count; j++) 
         { 
          if (ListMenuChild[j].IDParent == ListMenuParent[i].IDMenu) 
          { 
           innerHTML += "<li class=\"sub-menu\"><a href=\"" + ListMenuChild[j].FormName + "\">" + ListMenuChild[j].MenuName + "</a></li>" + Environment.NewLine; 
          } 
         } 
         innerHTML += "</ul>" + Environment.NewLine + "</li>" + Environment.NewLine; 
        } 
       } 
      } 
      divMenuBar.InnerHtml = innerHTML; 


     } 
    }

的ASPX的HTML代碼

<div class="menu-bar-wrap" id="wrap-menu-bar"> 
       <div class="menu-bar"> 
        <ul class="menu-bar-ul" runat="server" id="divMenuBar"> 

        </ul> 
       </div> 
      </div>

和CSS

.divMenuBarBlock { 
    float:left; 
    width:100%; 
    height:100%; 
} 

.menu-bar { 
    float:left; 
    min-height:100%; 
    width:100%; 
    height:100%; 
    background: #CFCFC4; 
} 

.menu-bar a{ 
    display:block; 
    padding: 10px 10px 10px 10px; 
    text-decoration:none; 
    border-bottom: 1px dotted gray; 
    color: #000; 
    letter-spacing: .002em; 
    text-transform: uppercase; 
    font-family:Helvetica, Arial, sans-serif; 
    font-style:normal; 
    font-size:medium; 
} 

.menu-bar li{ 
    list-style:none; 
} 

.menu-bar ul li ul li:hover { 
    background:gray; 
} 

.menu-bar-ul ul { 
    display:none; 
} 

.no-sub:hover { 
    background:gray; 
} 

.sub-arrow { 
    margin-left:15px; 
} 

.menu-bar-ul li.click ul { 
    display:block; 
} 

.menu-bar .sub-arrow:after { 
    content:'\203A'; 
    float:right; 
    margin-right:10px; 
    transform:rotate(90deg); 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
} 

.menu-bar li.click .sub-arrow:after { 
    content: '\2039'; 
} 

.menu-bar-ul ul a:before { 
    content:'\203A'; 
    margin-right:10px; 
}

scr ipt運行jquery

$(document).ready(function (e) { 
    $('.has-sub').click(function() { 
     $(this).toggleClass('click'); 
    }); 
    $('.has-sub li a').click(function (e) { 
     e.stopPropagation(); 
    }); 
});

以及如何我可以延遲切換類，使子菜單的動畫切換更加流暢？

來源

2017-05-09 Newbie Programmer

[toggleClass與延遲]的可能的複製（http://stackoverflow.com/questions/35434476/toggleclass-with-delay） –

NVM老總其他問題得到的答案已經 THX提醒 –

甲toggleClass接受下列參數

(className [, switch ] [, duration ] [, easing ] [, complete ])

所以延遲可以這樣

$(this).toggleClass('click',2000);

其中數字2000是確定動畫將運行多久的持續時間被加入。

來源

2017-05-09 03:53:16 brk

THX的傢伙，忘了這個 –

@NewbieProgrammer樂於幫忙 – brk

jQuery的toggleclass延遲時間

回答

相關問題