twitter drop down not working

вот код, который я использую, но выпадающий список не отображается. Моя коррекция javascript находится в правильной последовательности. и я также добавил функцию переключения выпадающего списка.twitter drop down not working

<!-- Set the viewport so this responsive site displays correctly on mobile devices --> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <!-- Include bootstrap CSS --> 
    <script src="includes/jquery/jquery-2.1.0.min.js"></script> 
<script src="includes/bootstrap/js/bootstrap.min.js"></script> 
<script type="text/javascript"> 
     $(document).ready(function() { 
      $('.dropdown-toggle').dropdown(); 
     }); 
</script> 
    <link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="includes/style.css" rel="stylesheet"> 


    </head> 
    <body> 
      <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a> </li> 
         <li><a href= "#"> Login</a> </li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a> </li> 
         <li><a href= "#">Twitter</a> </li> 
         <li><a href= "#"> Google+</a> </li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a> </li> 
         <li><a href= "#"> Contact</a> </li> 
       </ul> 
       </div> 
      </div> 

    </body> 

<div> 

<div class="bottom"> 
     <div class="container"> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
       <p>Content for the first footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
       <p>Content for the second footer section.</p> 
      </div> 
      <div class="col-md-4"> 
       <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
       <p>Content for the third footer section.</p> 
      </div> 
     </div> 
    </div> 
<!-- Include jQuery and bootstrap JS plugins --> 

</body> 
</html> 
</html>

источник

2014-09-20 himani agarwal

Есть некоторые проблемы с вашей разметкой. Вы закрываете некоторые элементы, такие как дважды. – ChaoticNadirs

Вы должны вставить плагин collapse и использовать включенные в него версии jquery и bootstrap. Вам не нужно вставлять какой-либо собственный скрипт, чтобы он работал. Вот ваш код с минимальными изменениями, просто чтобы сделать это работает:

<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Bootstrap Navbar Collapse</title> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </head> 
<body> 
    <div class= "navbar navbar-inverse navbar-static-top"> 
      <div class= "container"> 
       <a href="#" class="navbar-brand"> tech site</a> 
       <button class= "navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
        <span class= "icon-bar"></span> 
       </button> 
       <div class= "collapse navbar-collapse navHeaderCollapse"> 
       <ul class= "nav navbar-nav navbar-right"> 
         <li><a href= "#" class="active"> Home</a></li> 
         <li><a href= "#"> Login</a></li> 
         <li class="dropdown"> 
          <a href= "#" class="dropdown-toggle" data-toggle="dropdown"> Social Media<b class="caret"></b></a>       
          <ul class="dropdown-menu"> 
         <li><a href= "#" class="active">Facebook</a></li> 
         <li><a href= "#">Twitter</a></li> 
         <li><a href= "#"> Google+</a></li> 

          </ul> 
         </li> 
         <li><a href= "#"> About</a></li> 
         <li><a href= "#"> Contact</a></li> 
       </ul> 
       </div> 
      </div> 
    <div> 


    <div class="bottom"> 
      <div class="container"> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-heart"></span> Footer section 1</h3> 
        <p>Content for the first footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-star"></span> Footer section 2</h3> 
        <p>Content for the second footer section.</p> 
       </div> 
       <div class="col-md-4"> 
        <h3><span class="glyphicon glyphicon-music"></span> Footer section 3</h3> 
        <p>Content for the third footer section.</p> 
       </div> 
      </div> 
    </div> 

</body> 
</html>

Проверить эту ссылку jsfiddle, чтобы увидеть рабочий пример. Лучше, если вы поменяете бирку navbar navbar-inverse navbar-static-top от div до nav. А также добавьте role="navigation" на каждый навигатор, чтобы помочь с доступом.

Надеюсь, это полезно!

источник

2014-09-20 19:40:35 Academia

twitter drop down not working

ответ

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