Question

问题是下拉菜单到＆gt;我的个人资料＆lt;不会让它下降。当您在＆gt;我的个人资料＆lt;＆gt;下点击导航栏时一切都没有下降。无法弄清楚这个问题。网页应该说＆gt;我的个人资料＆lt; （下拉）朋友/照片/设置。这是我的代码：

<!doctype html>
<html lang="en">
    <head>
        <title>My page is Dynamic</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-2.1.4.min.js"</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</head>

<body>

<nav class="navbar navbar-inverse">
        <div class="container-fluid">

    <!-- Logo -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar"
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="#" class="navbar-brand">THEONEEYENICKY'SWEB</a>
    </div>

    <!-- Menu Item -->  
    <div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>

            <!-- drop down menu -->
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="#">Friends</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Settings</a></li>
            </ul>
        </li>
        </ul>
    </div>
    </div>
</nav>

</body>

</html>

Answer 1

请查看以下链接。如果它与你一起工作，请告诉我。

Fiddle

<nav class="navbar navbar-inverse">
    <div class="container-fluid">

<!-- Logo -->
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="mainNavBar"
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a href="#" class="navbar-brand">THEONEEYENICKY'SWEB</a>
</div>

<!-- Menu Item -->  
<div>
    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>

        <!-- drop down menu -->
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Profile <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Friends</a></li>
                <li><a href="#">Photos</a></li>
                <li><a href="#">Settings</a></li>
        </ul>
    </li>
    </ul>
</div>
</div>

Answer 2

缺少“＆gt;”

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Answer 3

缺少这三个文件添加全部并尝试

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>

bootstrap下拉菜单

3 个答案: