javascript - Trouble with bootstrap responsive nav collapse - Stack Overflow

admin2025-04-20 0

I've been pulling my hair out over this. The doc makes it seem so simple but I cannot for the life of me get the collapsed navigation bar to expand properly/consistently. I have to click 2-3 times for it to expand, and it only does so after playing the "collapse" animation.

In an attempt to isolate the issue, I created this page that has the stock bootstrap nav HTML and the bare minimum .js I think it required to get it to work.

.html

(same nav is on the root index for that site).

Help is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="css/my.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>

</head>
<body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="active">
                <a href="./ponents.html">Components</a>
              </li>
              <li class="">
                <a href="./javascript.html">Javascript plugins</a>
              </li>
              <li class="">
                <a href="./less.html">Using LESS</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="./download.html">Customize</a>
              </li>
              <li class="">
                <a href="./examples.html">Examples</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>



</body>
</html>

I have also tried adding this script in the head tag:

<script type="text/javascript">
$(document).ready(function() {
    $('.collapse').collapse();
}); 
</script>

but the collapse does not work at all when I do this.

In an attempt to isolate the issue, I created this page that has the stock bootstrap nav HTML and the bare minimum .js I think it required to get it to work.

http://stats.thephish.fm/test.html

(same nav is on the root index for that site).

Help is appreciated!

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="css/my.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/bootstrap-collapse.js"></script>

</head>
<body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="./index.html">Bootstrap</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="">
                <a href="./index.html">Overview</a>
              </li>
              <li class="">
                <a href="./scaffolding.html">Scaffolding</a>
              </li>
              <li class="">
                <a href="./base-css.html">Base CSS</a>
              </li>
              <li class="active">
                <a href="./ponents.html">Components</a>
              </li>
              <li class="">
                <a href="./javascript.html">Javascript plugins</a>
              </li>
              <li class="">
                <a href="./less.html">Using LESS</a>
              </li>
              <li class="divider-vertical"></li>
              <li class="">
                <a href="./download.html">Customize</a>
              </li>
              <li class="">
                <a href="./examples.html">Examples</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>



</body>
</html>

I have also tried adding this script in the head tag:

<script type="text/javascript">
$(document).ready(function() {
    $('.collapse').collapse();
}); 
</script>

but the collapse does not work at all when I do this.

Share Improve this question edited Apr 14, 2012 at 5:59 Andres I Perez 75.4k21 gold badges159 silver badges139 bronze badges asked Apr 14, 2012 at 2:36 ehed 8621 gold badge8 silver badges18 bronze badges

Share your (relevant) code and your specific question here. – PeeHaa Commented Apr 14, 2012 at 2:38
Sorry about that, pasted it in. I linked because it's kind of working, just that the behavior / animations are nutty. – ehed Commented Apr 14, 2012 at 2:43
1 Was including both bootstrap.js and bootstrap-collapse.js. oops. that fixed it. – ehed Commented Apr 14, 2012 at 3:00
@ehed just saw your ment, posted the same answer :/ .. The bootstrap.min.js file es with all of the plugins already included so no need to include the standalone plugins. – Andres I Perez Commented Apr 14, 2012 at 6:01

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

Was including both bootstrap.js and bootstrap-collapse.js. oops. I have to say this is kind of confusing, because every plugin says "Download file" next to it, which seems to indicate it's an add-on that enhances the default javascript library.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745110559a285557.html

javascriptTrouble with bootstrap responsive nav collapseStack Overflow

最新回复(0)