为什么我的滑动导航栏不断扩展，即使我不触发它

时间：2015-07-08 22:20:36

标签： jquery html css html5 twitter-bootstrap

请看一下。我累了用 media min-width 768px sidebar-wrapper和sidebar-nav li a，display：none，但是该幻灯片导航会一直显示（自动展开），甚至是触发该导航已经消失的按钮。 enter image description here 每次我用桌面刷新/打开

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});
body {
  color: #ffffff;
  background-color: #ffffff;

      }


.navbar li a {
  color: #ffffff !important;
}
.navbar li a:hover {
  color: gray !important;
}
.navbar-inner,
.navbar .btn-navbar {
  background: #ffffff
}
.navbar-inverse .navbar-toggle {
  border-color: #333;
  float: left;
}

#wrapper {
    padding-left: 0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

#wrapper.toggled {
    padding-left: 250px;
}

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    overflow-y: auto;
    left: 250px;
    width: 0;
    top: 0;
    height: 100%;
    margin-left: -250px;
    overflow-y: auto;
    background: #000;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}



#wrapper.toggled #sidebar-wrapper {
    width: 250px;
}

#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}

#wrapper.toggled #page-content-wrapper {
    position: absolute;
    margin-right: -250px;
}

/* Sidebar Styles */

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}

.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

.sidebar-nav li a:hover {
    text-decoration: none;
    color: #fff;
    background: rgba(255,255,255,0.2);
}

.sidebar-nav li a:active,
.sidebar-nav li a:focus {
    text-decoration: none;
}

.sidebar-nav > .sidebar-brand {
    height: 65px;
    font-size: 18px;
    line-height: 60px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

@media(min-width:768px) {
    #wrapper {
        padding-left: 250px;
    }

    #wrapper.toggled {
        padding-left: 0;
    }

    #sidebar-wrapper {
        width: 250px;
    }

    #wrapper.toggled #sidebar-wrapper {
        width: 0;
    }

    #page-content-wrapper {
        padding: 20px;
        position: relative;
    }

    #wrapper.toggled #page-content-wrapper {
        position: relative;
        margin-right: 0;
    }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="js/respond.js"></script>
<script src="js/bootstrap.min.js"></script>


<body>

<div id="wrapper">

    <nav role="navigation" class="navbar navbar-inverse">

    <div class="navbar-header">
        <button type="button" data-target="#" data-toggle="collapse" class="navbar-toggle" id="menu-toggle" style=" margin-left: 24px;"> 
        <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 id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-center">
                
                <li><a href="#">About</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="index.html"><i class="fa fa-youtube-play"></i> Youtube Channel</a></li>
        </ul>
    </div>
</nav> <!-- end navigation button-->

        <!-- Sidebar -->
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
                <li class="sidebar-brand" >
                    <a href="#">
                        sad
                    </a>
                </li>
                <li>
                    <a href="#">Dashboard</a>
                </li>

                <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">a<span class="caret"></span></a>
                <ul class="dropdown-menu navmenu-nav">
                    <li><a href="#">a1</a></li>
                    <li><a href="#">a2</a></li>
                    <li><a href="#">a3</a></li>
                  
                </ul>
            </li>
               
                <li>
                    <a href="#" >About</a>
                </li>
                
               
                    </ul>
            </ul>

        </div>
        <div id="page-content-wrapper">
            <div class="container-fluid">

    </div>

</nav> 


        </div>
    <!-- /#page-content-wrapper -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

</body>

1 个答案:

答案 0 :(得分：3)

更改

#sidebar-wrapper {
    background: #000 none repeat scroll 0 0;
    height: 100%;
    left: 0;
    margin-left: 0;
    overflow-y: auto;
    position: absolute;
    top: 0;
    transition: all 0.5s ease 0s;
    width: 0;
    z-index: 1000;
}

和

display: none;

对于您的第二个问题：我无法在您的CSS中找到width: 250px;。

自动扩展问题：

为导航的标准宽度设置@media (max-width: 768px) { #sidebar-wrapper { display: none; } } 。 在您的媒体查询中使用

#wrapper.toggled #sidebar-wrapper {
    width: 0px;
}

并将您的jquery代码更改为

display: none;

这未经过测试，但您应该明白这一点。 始终在开始时显示导航栏，当屏幕为＆lt; 768px echo " <div id='userBox' class='valign_inline'> <div id='avatar_and_name_box' class='valign_inline'> <div id='avatarBox' class='krug24 p'><img src='img/profile-photo.png'/></div> </div> </div>"; 时隐藏它，这样它就不会被动画化。 并将切换更改为使用新的标准宽度。

相关问题
最新问题