Skip to main content
Jhon Carlo
Jhon Carlo
Inspiring
December 28, 2017
解決済み

dropdown-toggle problem with google chrome

  • December 28, 2017
  • 返信数 2.
  • 7080 ビュー

Hi,

I'm tying to use a drop down menu but  this doesn't work in google chrome on computer  but  work on properly on smart phone and tablet and computer with safari.

Somewere I have notice of this:

If insert before the </body> the strings below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

this can solve the problem with google chrome on computer (but doesn't work on tablet and smartphone)

Any hint?

Thank you.

Jhon.

    このトピックへの返信は締め切られました。
    解決に役立った回答 Nancy OShea

    I use the very latest jQuery 3.2 with Bootstrap 3.7 and have no problems.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest Bootstrap 3.7 CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body {padding-top: 55px}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <!--Begin dropdown-->

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    <div class="container">

    <div class="row">

    <div class="jumbotron">

    <h1>Hello World!</h1>

    <h3>Bootstrap 3.7</h3>

    </div>

    </div>

    <div class="row">

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    </div>

    <!--latest jQuery 3.2-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap 3.7 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    返信数 2

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert解決！
    Community Expert
    December 28, 2017

    I use the very latest jQuery 3.2 with Bootstrap 3.7 and have no problems.

    <!doctype html>

    <html lang="en">

    <head>

    <meta charset="utf-8">

    <title>Bootstrap 3.3.7 Starter</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- Latest Bootstrap 3.7 CSS-->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>

    body {padding-top: 55px}

    </style>

    </head>

    <body>

    <!--begin top nav bar-->

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

    <div class="container-fluid">

    <div class="navbar-header"> <a class="navbar-brand" href="#"> BRAND NAME or LOGO </a>

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>

    </div>

    <div class="collapse navbar-collapse" id="myNavbar">

    <ul class="nav navbar-nav navbar-right">

    <li class="active"><a href="#">MENU 1</a></li>

    <!--Begin dropdown-->

    <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>

    <ul class="dropdown-menu">

    <li><a href="#">submenu 1-1</a></li>

    <li><a href="#">submenu 1-2</a></li>

    <li><a href="#">submenu 1-3</a></li>

    </ul>

    </li>

    <li><a href="#">MENU 3</a></li>

    <li><a href="#">MENU 4</a> </li>

    <li><a href="#">MENU 5</a> </li>

    <li><a href="#">MENU 6</a></li>

    </ul>

    </div>

    </div>

    <!--end top nav-->

    </nav>

    <div class="container">

    <div class="row">

    <div class="jumbotron">

    <h1>Hello World!</h1>

    <h3>Bootstrap 3.7</h3>

    </div>

    </div>

    <div class="row">

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    <div class="col-sm-6 col-md-3">

    PAGE CONTENT GOES HERE.....

    </div>

    </div>

    </div>

    <!--latest jQuery 3.2-->

    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

    <!--Bootstrap 3.7 JS-->

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    </body>

    </html>

    Nancy O'Shea— Product User & Community Expert
    Jhon Carlo
    Jhon Carlo作成者
    Inspiring
    December 28, 2017

    Thank you again Nancy!!!

    Now work great!!

    WolfShade
    WolfShade
    Legend
    December 28, 2017

    You are probably experiencing a conflict between jQuery and Bootstrap.

    https://community.canvaslms.com/thread/19727-jquery-and-bootstrap-conflict

    HTH,

    ^ _ ^

    契約条件Accessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices