Question

假设我在菜单栏的母版页上有代码

这是填充菜单条形码

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;
}

用于运行jquery的

脚本

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

以及如何延迟切换类，使子菜单的动画切换更加流畅？

Answer 1

toggleClass接受以下参数

class Kernel extends HttpKernel
{
    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        // \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

    // ...
}

因此可以像这样添加延迟

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

其中数字$(this).toggleClass('click',2000);是决定动画运行时间的持续时间。

jquery toggleclass延迟时间

1 个答案: