javascript - 可折叠导航栏问题

我正在尝试创建类似于 Bootstrap 的导航栏.如果您访问他们的网站并重新调整浏览器的大小。如果您将其调整得足够窄，顶部导航栏将变成一个按钮。当您单击该按钮时，它会将所有内容下推并再次显示完整的导航。

这就是我试图用这个 jsfiddle 完成的目标，但它存在以下问题:

最初，按钮没有隐藏，它应该是隐藏的，只有当屏幕太窄时才可见。
(修复)按钮不像 bootstrap 那样显示背景
(已修复)重新调整浏览器大小以使导航消失并单击按钮。然后点击子菜单，子菜单项显示不正常。

问题 1 屏幕打印:

导航栏应该还不可见，因为浏览器宽度大于 940px nav bar should not be visible yet because browser width is larger than 940px

导航栏出现，没问题，因为浏览器宽度小于940px nav bar appears, it's fine because browser width is less than 940px

完整的 html 代码:

<html lang="en">
<head>
    <title></title>

    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {    
        });
    </script>
</head>
<body>
    <div class="conatiner-fluid">
        <div class="row-fluid">
            <div class="span10">

                <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>

                <div class="nav-collapse">
                    <ul class="nav nav-tabs">
                        <li><a href="#">Home</a></li>
                        <li class="dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown"
                                href="#">Help<b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">Keep</a></li>
                                <li><a href="#">Screaming</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="row-fluid">
            <div class="span10">
                other content
            </div>
        </div>
    </div>
</body>
</html>

最佳答案

这是否更接近您所追求的目标？
http://jsfiddle.net/panchroma/R4BEY/

您的示例中有一个 span10 div，但我不知道您要用它去哪里，所以我在它后面添加了一个 span2 来完成该行。

HTML 如下。您在打开的容器 div 上有错字，并且缺少导航栏和导航栏内部 div。我认为这就是我所做的更改。

祝你好运

<div class="container-fluid"> 
<div class="row-fluid">
<div class="span10">

<div class="navbar">
<div class="navbar-inner">


<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>

 <div class="nav-collapse collapse ">
    <ul class="nav nav-tabs">
      <li><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Help<b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Keep</a></li>
          <li><a href="#">Screaming</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div> <!-- end nav-collapse -->

 </div><!-- end nav bar inner -->  
 </div> <!-- end nav bar -->

</div><!--end span10 -->
<div class="span2">span 2</div>
</div><!-- end row -->


<div class="row-fluid">
<div class="span10">
  other content
</div>
<div class="span2">span 2</div>
</div>
</div>

关于javascript - 可折叠导航栏问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14205178/

javascript - 可折叠导航栏问题

上一篇：javascript - jQuery 子菜单不会显示

下一篇：TableView 中的 JavaFX 单元格颜色