Bootstrap navbar dropbox не показывает выпадающее меню

Я прочитал несколько потоков в stackoverflow о dropdown box в панели навигации, но ни один из них не оказался полезным для моей проблемы.Bootstrap navbar dropbox не показывает выпадающее меню

Я использую самозагрузку версию 3, и я использую предоставленный navbar пример, написанный на официальном сайте:

http://getbootstrap.com/components/#navbar

Я использую тот же код, как на этом сайте, и им в том числе следующего JavaScript и CSS файлы:

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="static/js/transition.js"></script> 
<script type="text/javascript" src="static/js/collapse.js"></script> 
<script type="text/javascript" src="static/js/dropdown.js"></script> 
<script type="text/javascript" src="static/js/bootstrap.js"></script> 
<link rel="stylesheet" href="static/css/bootstrap.css" type="text/css"> 
<link rel="stylesheet" href="static/css/footer.css" type="text/css">

Я скачал различные js и css файлы, кроме из файла jquery. Я получил эту работу до этого, но не сейчас, даже после многого устранения неполадок, в то время порядок тегов скриптов был неправильным.

В соответствии с загрузочным сайтом необходим плагин jquery, а плагин слияния зависит от плагина перехода (так, что он размещен перед плагином свернуть). Затем dropdown js и бутстрап в дополнение к файлам css.

Я не могу понять, почему это не работает. Проблема в том, что когда я нажимаю на поле dropdown, он вообще не показывает меню, ничего не происходит. Я пробовал много разных конфигураций, но ничего не работает.

Я использую этот код:

 <html 
    <head> 
     <title>testing</title> 
     <script src="http://code.jquery.com/jquery-latest.js"></script> 
     <script type="text/javascript" src="static/js/transition.js"></script> 
     <script type="text/javascript" src="static/js/collapse.js"></script> 
     <script type="text/javascript" src="static/js/dropdown.js"></script> 
     <script type="text/javascript" src="static/js/bootstrap.js"></script> 
     <link rel="stylesheet" href="static/css/bootstrap.css" type="text/css"> 
     <link rel="stylesheet" href="static/css/footer.css" type="text/css"> 
    </head> 
    <body> 
    <nav class="navbar navbar-default" role="navigation"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
      <input type="text" class="form-control" placeholder="Search"> 
      </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
     </form> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
      </ul> 
      </li> 
     </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 
    </body> 
    </html>

Я также попытался замененным весь импорт с кодом erikrunia писал в одном из своих ответов, который является таким же, как на примере сайте, а также.

Вот как выглядит страница, когда ее визуализация браузер: enter image description here

После запуска отладчика на сайте я получить эти предупреждения/ошибку, но я также получаю много из них при посещении начальной загрузки сайта сам так я не знаю, если они связаны с реальной проблемой:

18:23:45.672 file:///Users/exceed/index.html 
18:23:45.673 file:///Users/exceed/static/js/jquery.js 
18:23:45.674 file:///Users/exceed/static/js/transition.js 
18:23:45.674 file:///Users/exceed/static/js/collapse.js 
18:23:45.675 file:///Users/exceed/static/js/dropdown.js 
18:23:45.675 file:///Users/exceed/static/js/bootstrap.js 
18:23:45.676 file:///Users/exceed/static/css/bootstrap.css 
18:23:45.676 file:///Users/exceed/static/css/footer.css 
18:23:45.643 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:93 
18:23:45.643 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:195 
18:23:45.643 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:201 
18:23:45.643 Unknown pseudo-class or pseudo-element '-webkit-search-cancel-button'. Ruleset ignored due to bad selector. bootstrap.css:205 
18:23:45.644 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:306 
18:23:45.644 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:344 
18:23:45.645 Unknown property 'box-sizing'. Declaration dropped. bootstrap.css:1882 
18:23:45.645 Expected end of value but found '\9 '. Error in parsing value for 'margin-top'. Declaration dropped. bootstrap.css:1888 
18:23:45.645 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:1913 
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-outer-spin-button'. Ruleset ignored due to bad selector. bootstrap.css:1917 
18:23:45.645 Unknown pseudo-class or pseudo-element '-ms-input-placeholder'. Ruleset ignored due to bad selector. bootstrap.css:1965 
18:23:45.645 Unknown pseudo-class or pseudo-element '-webkit-input-placeholder'. Ruleset ignored due to bad selector. bootstrap.css:1969 
18:23:45.646 Unknown property 'user-select'. Declaration dropped. bootstrap.css:2262 
18:23:45.646 Expected color but found 'auto'. Expected color but found '-webkit-focus-ring-color'. Expected end of value but found '-webkit-focus-ring-color'. Error in parsing value for 'outline'. Declaration dropped. bootstrap.css:2267 
18:23:45.646 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:2291 
18:23:45.647 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:3555 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5459 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5460 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5476 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5477 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5487 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5488 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5498 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5499 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5509 
18:23:45.650 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:5510 
18:23:45.650 Unknown property 'zoom'. Declaration dropped. bootstrap.css:5518 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:5964 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:5973 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6049 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6054 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6136 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6142 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6454 
18:23:45.651 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:6458 
18:23:45.651 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:6459 
18:23:45.651 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6463 
18:23:45.651 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:6469 
18:23:45.651 Error in parsing value for 'background-image'. Declaration dropped. bootstrap.css:6470 
18:23:45.651 Expected 'none' or URL but found 'progid'. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6474 
18:23:45.651 Expected 'none' or URL but found 'alpha('. Error in parsing value for 'filter'. Declaration dropped. bootstrap.css:6482 
18:23:45.651 Expected end of value but found '\9 '. Error in parsing value for 'background-color'. Declaration dropped. bootstrap.css:6541 
18:23:45.658 TypeError: $(...).on is not a function collapse.js:160 
18:23:45.659 TypeError: $(...).on is not a function dropdown.js:149 
18:23:45.661 TypeError: $(...).on is not a function bootstrap.js:163 
18:23:45.662 The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. index.html

источник

2014-01-11 Anonymous

Я бы предположил, что bootstrap.js должен быть выше перехода .js. Также попробуйте переместить два импорта CSS выше всего. – erikrunia

Я добавил bootstrap.js после jquery, но все равно не повезло. Когда я перейду на примерный сайт, он работает, когда я нажимаю на поле для удаления, так что все еще есть что-то не так. –

Я бы нажал f12 и посмотрел, есть ли у вас какие-либо ошибки в консоли. Возможно, путь к вашим .js-файлам неверен, и они вообще не загружаются. – erikrunia

попробуйте использовать CDN ссылку, предоставленный бутстрапом вместо вашего импорта, чтобы определить, является ли ваша разметка вызывает проблемы или параметры импорт JS.

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 


<!-- Latest compiled and minified JavaScript --> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Кроме того, проверьте правильность разметки вашего навигатора html. Выпадающее меню - это еще один UL, встроенный в более высокий уровень ul/li, который составляет навигационную панель.

И, наконец, ваш тег <html> выглядит как <html, что может вызвать проблемы. Также добавьте соответствующий тип doctype и meta viewport

<!DOCTYPE html> 
<html> 
    <head> 

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

    ... rest of your code

источник

2014-01-11 16:09:08 erikrunia

Хм, я удалил все импорт и заменил их кодом, но никаких изменений нет. Я буду обновлять первое сообщение с использованием кода im. –

делает ли ваша страница правильно отображаться в стороне от выпадающего меню? можете ли вы включить скриншот навигатора – erikrunia

Да, он отображается правильно. Ive приложил скриншот к первому сообщению –

Я, наконец, получил его работу. Это был конфликт между файлом dropdown.js и другим файлом javascript, возможно, bootstrap.js. Когда я удалил dropdown.js, выпадающее меню работало так, как должно. В документации не говорится, что вам нужно dropdown.js, чтобы заставить navbar работать, но если бы вы хотели, чтобы отдельное выпадающее место было на вашем сайте, ваше раскрывающееся меню на панели навигации перестало бы работать, потому что кажется, что у вас нет обоих bootstrap.js и выпадающего списка.js импортируется в то же время, что немного странно, потому что вы всегда нуждаетесь в bootstrap.js в любом случае .. из того, что обнаружил ive, при импорте выпадающего меню отключено без какого-либо предупреждения. Некоторые места говорят, что в бутстрапе уже есть функциональность dropdown, но я не уверен ... это интересно читать также Bootstrap Dropdown not working - Dropdown doesn't toggle

В bootstrap.js теперь я вижу, что они реализуют функциональность для того, что, кажется, все javascripts у них есть, и я не вижу в документации, что у них есть сделайте это, но не все файлы, похоже, являются конфликтами, если вы попытаетесь импортировать их отдельно.

источник

2014-01-12 14:55:39

Bootstrap navbar dropbox не показывает выпадающее меню

ответ

Смежные вопросы