меню начальной загрузки сворачивается, но не отображается при нажатии на свернутую кнопку

Я использую bootstrap и имею простое меню с двумя пунктами

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Home Page</title>
  <link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.css"); ?>">
</head>
<body>
  <nav class="navbar navbar-default" role="navigation">
   <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="item1.html">item1</a></li>
        <li><a href="item1.html">item2</a></li>
      </ul>
    </div>
  </div>
</nav>
<script type="text/javascript" src="<?php echo base_url("assets/js/jquery-1.10.2.js"); ?>"></script>
<script type="text/javascript" src="<?php echo base_url("assets/js/bootstrap.js"); ?>"></script></body></html>

1) Когда браузер развернут, я вижу кнопки item1, item2 с правой стороны, и он работает хорошо

2) Когда ширина браузера меньше, меню свернуто кнопка свернутого меню

3) Но, после нажатия на кнопку меню, item1 и item2 не отображаются.

Есть идеи, что не так?


css responsive-design twitter-bootstrap
person flashore    schedule 27.01.2017    source источник
comment
Вы видите какие-либо ошибки в консоли?   -  person Mohammad Usman    schedule 27.01.2017
comment
добавлен bootstrap.js, я только что добавил часть кода. Меню рушится, так что начальная загрузка работает. jquery также добавляется перед начальной загрузкой   -  person flashore    schedule 27.01.2017
comment
Пожалуйста, создайте рабочий пример, как на Fiddle, чтобы мы могли увидеть проблему.   -  person Mohammad Usman    schedule 27.01.2017

Ответы (2)


arrow_upward
0
arrow_downward

Вы импортировали jquery и bootstrap js в html. Они нужны для того, чтобы навигация работала в адаптивном режиме? Если нет, попробуйте добавить их оба в html:

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

Вам нужно импортировать/добавить сначала jquery, а затем bootstrap js, потому что bootstrap js зависит от jquery.

person Anton Grigorov    schedule 27.01.2017
comment
Можешь открыть исходник страницы в браузере и попробовать открыть оба js со ссылками оттуда? Вы получаете какие-либо сообщения об ошибках в консоли браузера? - person Anton Grigorov; 27.01.2017
comment
Большое спасибо!!!! Я ссылался на jquery.js и bootstrap.js, но на диске у меня есть jquery_min.js и bootstrap_min.js - person flashore; 27.01.2017
comment
Без проблем. Рад, что вы решили проблему. Пожалуйста, примите мой ответ, если он помог :) - person Anton Grigorov; 27.01.2017

arrow_upward
0
arrow_downward

Большое спасибо

Я ссылался на неправильные файлы *.js :(

Я не видел никакой ошибки, поэтому я думал, что путь был правильным.

person flashore    schedule 27.01.2017