Question

我是ASP.NET的新手，也是新秀。我想创建一个具有下拉菜单的菜单，但是我有一个问题：每当我单击下拉菜单时，什么都没有发生，就像什么都没有弹出一样，我以为自己的代码有问题吗？我不知道我在哪里错过任何东西！所以伙计们帮忙！

这是.aspx标记：

<nav class="navbar my-navbar">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" runat="server" href="#">Registration</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="~/" runat="server">Home <span class="sr-only">(current)</span></a></li>
                    <li><a href="~/RegistrationPages/Student.aspx" runat="server">Student</a></li>
                    <li><a href="~/RegistrationPages/Department.aspx" runat="server">Department</a></li>
                    <li><a href="~/RegistrationPages/Lecturer.aspx" runat="server">Lecturer</a></li>
                    <li><a href="~/RegistrationPages/course.aspx" runat="server">Course</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Bootstrap 
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Carousel</a></li>
                            <li><a href="#">Forms</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Select</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

和CSS文件

.my-navbar {
     background-color: #004080;
     border-color: #425766;
 }

.my-navbar .navbar-brand {
    color: #fff;
}

    .my-navbar .navbar-brand:hover, .my-navbar .navbar-brand:focus {
        color: #AAD5FF;
    }

.my-navbar .navbar-text {
    color: #d7e2e9;
}

.my-navbar .navbar-nav > li > a {
    color: #fff;
}

    .my-navbar .navbar-nav > li > a:hover, .my-navbar .navbar-nav > li > a:focus {
        color: #fff;
        background-color: #B05800;
    }

.my-navbar .navbar-nav > li > .dropdown-menu {
    background-color: #2894FF;
}

    .my-navbar .navbar-nav > li > .dropdown-menu > li > a {
        color: #d7e2e9;
    }

        .my-navbar .navbar-nav > li > .dropdown-menu > li > a:hover,
        .my-navbar .navbar-nav > li > .dropdown-menu > li > a:focus {
            color: #fff;
            background-color: #004182;
        }

    .my-navbar .navbar-nav > li > .dropdown-menu > li > .divider {
        background-color: #69899f;
    }

.my-navbar .navbar-nav > .active > a, .my-navbar .navbar-nav > .active > a:hover, .my-navbar .navbar-nav > .active > a:focus {
    color: #e5dbdb;
    background-color: #B05800;
}

.my-navbar .navbar-nav > .open > a, .my-navbar .navbar-nav > .open > a:hover, .my-navbar .navbar-nav > .open > a:focus {
    color: #e5dbdb;
    background-color: #425766;
}

.my-navbar .navbar-toggle {
    border-color: #425766;
}

    .my-navbar .navbar-toggle:hover, .my-navbar .navbar-toggle:focus {
        background-color: #425766;
    }

    .my-navbar .navbar-toggle .icon-bar {
        background-color: #d7e2e9;
    }

.my-navbar .navbar-collapse,
.my-navbar .navbar-form {
    border-color: #d7e2e9;
}

.my-navbar .navbar-link {
    color: #d7e2e9;
}

    .my-navbar .navbar-link:hover {
        color: #e5dbdb;
    }

  @media (max-width: 767px) {
.my-navbar .navbar-nav .open .dropdown-menu > li > a {
    color: #d7e2e9;
}

    .my-navbar .navbar-nav .open .dropdown-menu > li > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #e5dbdb;
    }

.my-navbar .navbar-nav .open .dropdown-menu > .active > a, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:hover, .my-navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #e5dbdb;
    background-color: #425766;
}
}

Answer 1

呈现的文本“注册”没有嵌套在按钮内，如果您单击span.icon-bar，它将打开菜单。只需将要单击的内容嵌套在按钮内即可。

<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <a class="navbar-brand" runat="server" href="#">Registration</a>
  </button>
</div>

为什么我的下拉菜单在ASP.NET中不起作用？

1 个答案: