Data-toggle и data-target не работают

Я искал различные решения, но никто из них не помог мне до сих пор. Мое раскрывающееся меню не работает, потому что переключение данных и цель данных не «распознаются» (по крайней мере, именно поэтому я думаю, что это не работает). Я не могу найти решение, поэтому я надеюсь, что кто-то здесь поможет мне. Вот код:Data-toggle и data-target не работают

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Bootstrap 101 Template</title> 

    <!-- Bootstrap --> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

    <style> 
     .box{ 
      background-color: #d3d3d3; 
      border: 1px solid gray; 
     } 
    </style> 
</head> 
<body> 

    <div class="navbar navbar-inverse"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a href="" class="navbar-brand">My Website</a> 

       <button type="button" class="navbar-toggle" datatoggle="collapse" data-target=".navbar-collapse"> 

        <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"> 
       <ul class="nav navbar-nav"> 
        <li><a href="">Page 1</a></li> 
        <li><a href="">Page 1</a></li> 
        <li><a href="">Page 1</a></li> 

       </ul> 

      </div> 
     </div> 
    </div> 

    <h1>Hello, world!</h1> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-md-6 box">Content</div> 
      <div class="col-md-6 box">Content</div> 
     </div> 
    </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
</body> 
</html>

https://jsbin.com/jumuka/edit?html,output

источник

2015-08-09 ironspeed12

Пожалуйста, включите в свой пост весь соответствующий код и ** не ** просто укажите ссылку на сайт хостинга кода. Ваш пост должен стоять отдельно от любого другого ресурса; подумайте, что произойдет, если этот сайт опустится в будущем! –

Вы datatoggle="collapse" вам нужно data-toggle="collapse".

источник

2015-08-09 05:41:22 vanburen

Data-toggle и data-target не работают

ответ

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