Question

我的网站上有一个小导航栏，我意识到链接在点击它们时无法打开（模板/定价/注册/登录）。任何人都有线索？

以下是代码：

<nav class="navbar navbar-default navbar-static-top">
    <!-- color, statisch-->
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse ">
                <!-- button, navbar mit dropmenu wenn bildschirm zu klein-->
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <!-- creates 3 lines in the toggle navigation when screen too little -->
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="index.php">TAIL
                    <!-- <span class="glyphicon glyphicon-home" id="homeIcon"></span> -->
            </a>

        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-left">
                <li class="dropdown">
                    <a href="templates.php" class="dropdown-toggle" data-toggle="dropdown" >Templates</a>
                </li> 
                <li class="dropdown"> <a href="pricing.php" class="dropdown-toggle" data-toggle="dropdown" >Pricing</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown"> 
                    <a href="register.php" class="dropdown-toggle" data-toggle="dropdown" >Sign Up
                        <span class="glyphicon glyphicon-user" id="userIcon"></span>
                    </a>
                </li>
                <li class="dropdown"> 
                    <a href="login.php" class="dropdown-toggle" data-toggle="dropdown" >Log In 
                        <span class="glyphicon glyphicon-log-in" id="logIcon"></span>
                    </a>
                </li>
            </ul>   
        </div>
    </div>          
</nav>

这是头部：

<head>
    <title>Built your Website</title>
    <meta charset="UTF-8">  
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="style.css">

     <!--jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

Answer 1

由于带有self.navigationController.hidesBarsOnSwipe = true;标记的属性data-toggle="dropdown"，它无效。当您使用此属性时，它会阻止链接的默认行为并尝试打开<a>菜单。

有关详情，请查看以下链接：http://getbootstrap.com/javascript/#dropdowns

从dropdown标记中移除该属性，并且还删除了不必要的<a>，dropdown，并且您的代码应该有效。

dropdown-toggle

JSFIDDLE ：https://jsfiddle.net/LLpfvcdu/

左键单击时，href链接不会打开

1 个答案: