Question

所以我有导航栏下拉列表链接到其他页面，也链接到此页面（链接到一个页面），但为什么导航栏上的折叠功能无法工作？

这是代码：

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="../content/main.php#home">Home</a></li>
            <li><a href="../content/emblem.php">Emblem</a></li>
            <li><a href="../content/history.php">History</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li>
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

此代码仍然链接到此页

<li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li>
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li>
                </ul>
            </li>

我的问题是崩溃是如何起作用的？

Answer 1

这会折叠您的导航栏：

CSS文件：

/* To Dropdown navbar dropdown on hover */
.navbar-nav > li:hover > .dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
        <link href="StyleSheet1.css" rel="stylesheet" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div>


              
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>


    <!-- Collection of nav links and other content for toggling -->
    <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="../content/main.php#home">Home</a></li>
            <li><a href="../content/emblem.php">Emblem</a></li>
            <li><a href="../content/history.php">History</a></li>
            <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">The Games <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games2">Water</a></li>
                    <li><a data-toggle="collapse" data-target=".navbar-collapse.in" href="#games3">Non-Water</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>


    </nav>


    
    </div>
    </form>
</body>
</html>

确保你有一个样式表包括：你只需要bootstrap.css和bootstrap.min.css，stylesheet1就是下面的例子。

单击一个页面中的一个链接后如何使导航栏折叠

1 个答案: