个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 07:48:27 25 4
gpt4 key购买 nike

当我注意到前端有一个大错误时，我刚刚在一个新网站的后端工作，我一直在努力解决这个问题。

我有一个我一直在使用的网站的旧版本，并且已将其其余部分移动并整理到新版本中。然而，当我在 iPhone 上使用 Safari 浏览器时，它无法在新浏览器上正确加载下拉菜单，尽管从旧网站复制了网站页眉和页脚(包含相同的菜单)。

当您按下菜单时，它会在 iPhone 上打开然后立即关闭。但是 chrome 和 firefox 网络浏览器工作正常。我试图查看论坛并更改 Bootstrap 代码，但似乎没有任何效果。它仅在响应式菜单下拉菜单中执行。

奇怪的是，旧网站有全宽下拉菜单，而新网站停留在右侧(不是全宽)，就好像它没有正确加载一样。

旧站点(工作)

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">

最佳答案

.navbar-right {position: absolute;} remove this style. – vel

效果很好，谢谢 vel!

关于jquery - 在 iPhone 上打开时下拉菜单自动关闭 (Bootstrap v3.3.1)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30571349/

25 4 0
文章推荐： ios - 从 Table View controller 到 Tab Bar Controller
文章推荐： css - 如何使用内联样式更改最后一个子项
文章推荐： css - 覆盖多个 LESS 文件中的变量
文章推荐： html - 删除未使用的 css 代码
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com