我正在尝试创建一个包含多个下拉列表的图标标题栏 [英] I am trying to create a icon header bar with contain multiple dropdown

查看:63
本文介绍了我正在尝试创建一个包含多个下拉列表的图标标题栏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

嗨我试图放下一个图标栏,但我正在尝试编写脚本,你可以帮助写下多个下拉



我是什么尝试过:



hi I tried to drop down an icon bar but I am trying to write the script can you help to write multiple-drop down

What I have tried:

<pre><div class="icon-bar">

    <a class="" href="~/Home/Index" style="padding-bottom: 10px" id="home_btn">
        
    </a>
    @if (Request.IsAuthenticated && Session["ActorID"] != null)
    {
        <div class="dropdown">

            <button class="dropbtn" id="btn">Online Applications ▼</button>
            <div class="dropdown-content">
                @*<a href="~/ProcessOnlineApps/Process" id="searchonlineApp"> Process</a>
                    <a href="~/Search/Search" id="search" > Search</a>*@
                <a href="~/ProcessOnlineApp/Process" id="search"> Process</a>
                @*<a href=@System.Web.Configuration.WebConfigurationManager.AppSettings["NewAppDev"]> New Application</a>*@
                <a href="~/Searching/Search" id="search"> Search</a>
                <a href="~/LicensingPayment/Index" id="logout"> Payment Process</a>
            </div>

        </div>
    }

    @if (Request.IsAuthenticated && Session["ActorID"] != null)
    {
        <div class="dropdown" id="LinkLogout" style="position: absolute; right: 19px;">
            <button class="dropbtn" id="btn_MyAccount">@CultureInfo.CurrentCulture.TextInfo.ToTitleCase(Session["UserName"].ToString().Split('\\')[1].Replace(".", " ").ToLower()) ▼</button>

            <div class="dropdown-content1">
                <a href="~/UserDocument/UserGuideDocument" id="UserGuide" target="_blank"> User Guide</a>
                <a href="~/Home/Logout" id="logout"> Logout</a>

            </div>
        </div>
    }
    @if (Request.IsAuthenticated && Session["ActorID"] != null && Session["SysAdmin"] != null && (bool)Session["SysAdmin"])
    {
        <div class="dropdown">

            <button class="dropbtn" id="btn">IT Maintenance ▼</button>
            <div class="dropdown-content">
                @*<a href="~/ManageUsers/UserRoles" id="UserRoles"> Users&Roles</a>*@
                <a href="~/Actor/Users_Process" id="UserRoles"> Users\Roles</a>
                <a href="~/Email/Index" id="UserRoles"> Email</a>
                @*<a href="~/PaymentSearc/PaymentSearc" id="UserRoles"> Payment Search</a>*@
                @* <a href="~/Search/Search" id="search"> Search</a>*@
            </div>

        </div>
    }


    @if (Request.IsAuthenticated && Session["ActorID"] != null)
    {
        <div class="dropdown">

            <button class="dropbtn" id="btn">Depatment Resources ▼</button>
            <div class="dropdown-content">
                <a href="~/DepartmentResources/AbcNeWCheckList" target="_blank" id="UserRoles"> ABC New Emp Check List </a>
            </div>
        </div>
    }

    @if (Request.IsAuthenticated && Session["ActorID"] != null)
    { 
        <div class="dropdown">
            <button class="dropbtn" id="btn">Payment Search ▼</button>
            <div class="dropdown-content">
                <a href="~/PaymentSearc/PaymentSearc" id="UserRoles"> Search</a>
                @*<a href="~/PaymentSearc/PaymentSearc" id="UserRoles">*@ Edit <br />
                <a id="UserRoles"> Refund</a><br />
                <a class="test" href="#"> Another dropdown <span class="dropbtn"></span></a>


                <a id="UserRoles"> Post</a>
                <a id="UserRoles"> Request</a>

            </div>
        </div>
    }
</div>
<script>
    $(document).ready(function () {
        $('dropdown-submenu a.test').on("click", function (e) {
            $(this).next('ul').toggle();
            e.stopPropagation();
            e.preventDefault();

        });

    });
</script>

<body>

推荐答案

(文件).ready(功能(){
(document).ready(function () {


('dropdown-submenu a.test')。on(click,function(e){
('dropdown-submenu a.test').on("click", function (e) {


(this) .next('ul')。toggle();
e.stopPropagation();
e.preventDefault();

});

});
< / script>

< body>
(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> <body>


这篇关于我正在尝试创建一个包含多个下拉列表的图标标题栏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆