在iPhone上打开它时,下拉菜单会自动关闭(Bootstrap v3.3.1)

时间:2015-06-01 10:38:04

标签: jquery html css twitter-bootstrap

当我注意到前端发生了一个很大的错误时,我刚刚在一个新网站的后端工作,而我却一直试图解决这个问题。

我有一个旧版本的网站,我一直在努力,并在新版本上移动和整理其余部分。然而,当我在iPhone上访问Safari浏览器时,尽管在旧网站上复制了网站页眉和页脚(包含相同的菜单),但它并没有正确地在新浏览器上加载下拉菜单。

当您按下菜单时,它将打开,然后立即关闭在iPhone上。但是chrome和firefox Web浏览器工作正常。我试图查看论坛并更改引导代码,但似乎没有任何工作。它只在响应式菜单下拉列表中执行。

奇怪的是,旧网站有全宽下拉菜单,新网站位于右侧(不是全宽),好像没有正确加载一样。

旧网站(工作)

old.hidden-network.co.uk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php echo $title; ?> | Social Research Unit</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="<?php echo $keywords; ?>">
    <meta name="description" content="<?php echo $description; ?>">
    <link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon">
    <link href="/inc/css/bootstrap.min.css" rel="stylesheet">
    <link href="/inc/css/prettyPhoto.css" rel="stylesheet">
    <link href="/inc/css/screen.min.css" rel="stylesheet" media="screen">
    <link href="/inc/css/print.min.css" rel="stylesheet" media="print">
    <!--[if lt IE 9]>
        <script src="/inc/js/html5shiv.min.js"></script>
        <script src="/inc/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="/inc/js/jquery.min.js"></script>
</head>
<body>
    <!-- HEADER START -->
    <nav class="navbar navbar-fixed-top dartNavbar" role="navigation">
        <div class="container">
            <?php $lang->getLinks(); ?>
            <div class="navbar-header">
                <a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#"
                    data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    Menu
                </a>
                <a class="navbar-brand dartNavbar-brand" href="/">
                    <div class="titleShapes">
                        <span class="DataUnit" title="Data Unit"></span>
                        <span class="WhatWorksUnit" title="What Works Unit"></span>
                        <span class="InnovationUnit" title="Innovation Unit"></span>
                        <span class="PlaceUnit" title="Place Unit"></span>  
                    </div>
                    <img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" />
                </a>
            </div>

            <div id="navbar" class="navbar-collapse collapse no-transistion">
                <ul class="nav navbar-nav navbar-right">
                    <li<?php $if->active('about'); ?>>
                        <a href="/About/">About</a>
                    </li>

                    <li<?php $if->active('process'); ?>>
                        <a href="/methods/">Methods</a>
                    </li>

                    <li<?php $if->active('projects'); ?>>
                        <a href="/projects/">Projects</a>
                    </li>

                    <li<?php $if->active('resources'); ?>>
                        <a href="/resources/">Resource</a>
                    </li>

                    <li<?php $if->active('contact'); ?>>
                        <a href="/contact/">Contact</a>
                    </li>

                    <li class="youtube">
                        <a href="https://youtube.com/socialresearchunit" target="_blank">
                            <div class="icon"></div>
                        </a>
                    </li>

                    <li class="twitter">
                        <a href="https://twitter.com/socialresunit" target="_blank">
                            <div class="icon"></div>                        
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- HEADER ENDS -->

    <!-- CONTENT STARTS -->
    <div class="content">

新网站(不工作)

new.hidden-network.co.uk

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title><?php echo $title; ?> | Social Research Unit</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="<?php echo $keywords; ?>">
    <meta name="description" content="<?php echo $description; ?>">
    <link rel="icon" href="/inc/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/inc/img/favicon.ico" type="image/x-icon">
    <link href="/inc/css/bootstrap.min.css" rel="stylesheet">
    <link href="/inc/css/prettyPhoto.css" rel="stylesheet">
    <link href="/inc/css/screen.min.css" rel="stylesheet" media="screen">
    <link href="/inc/css/print.min.css" rel="stylesheet" media="print">
    <!--[if lt IE 9]>
        <script src="/inc/js/html5shiv.min.js"></script>
        <script src="/inc/js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript"  src="/inc/js/jquery.min.js"></script>
    <script type="text/javascript"  src="/inc/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- HEADER START -->
    <nav class="navbar navbar-fixed-top dartNavbar" role="navigation">
        <div class="container">
            <?php $lang->getLinks(); ?>
            <div class="navbar-header">
                <a type="button" class="navbar-toggle collapsed dartMenuButton" data-toggle="collapse" href="#"
                    data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <div class="icon-bar icon-bar-top"></div>
                    <div class="icon-bar"></div>
                    <div class="icon-bar"></div>
                </a>
                <a class="navbar-brand dartNavbar-brand" href="/">
                    <div class="titleShapes">
                        <span class="DataUnit" title="Data Unit"></span>
                        <span class="WhatWorksUnit" title="What Works Unit"></span>
                        <span class="InnovationUnit" title="Innovation Unit"></span>
                        <span class="PlaceUnit" title="Place Unit"></span>  
                    </div>
                    <img src="/inc/img/logo.full.png" alt="Dartington Social Research Unit" class="hidden-xs hidden-sm" />
                    <img src="/inc/img/logo.full.notext.png" alt="Dartington Social Research Unit" class="hidden-md hidden-lg" />
                </a>
            </div>

            <div id="navbar" class="navbar-collapse collapse no-transistion">
                <ul class="nav navbar-nav navbar-right">
                    <li<?php $if->active('about'); ?>>
                        <a href="/about/">About</a>
                    </li>

                    <li<?php $if->active('methods'); ?>>
                        <a href="/methods/">Methods</a>
                    </li>

                    <li<?php $if->active('projects'); ?>>
                        <a href="/projects/">Projects</a>
                    </li>

                    <li<?php $if->active('resources'); ?>>
                        <a href="/resources/">Resource</a>
                    </li>

                    <li<?php $if->active('contact'); ?>>
                        <a href="/contact/">Contact</a>
                    </li>

                    <li class="youtube">
                        <a href="https://youtube.com/socialresearchunit" target="_blank">
                            <div class="icon"></div>
                        </a>
                    </li>

                    <li class="twitter">
                        <a href="https://twitter.com/socialresunit" target="_blank">
                            <div class="icon"></div>                        
                        </a>
                    </li>

                    <li class="search">
                        <a onClick="search()">
                            <div class="icon"></div>
                            <span>
                                <input type="text" id="search" data-search="Search" />
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- HEADER ENDS -->

    <!-- CONTENT STARTS -->
    <div class="content">

1 个答案:

答案 0 :(得分:0)

  

.navbar-right {position:absolute;}删除此样式。 - vel

这很有效,谢谢你!