Question

我在引导程序中重新设计了移动导航，当点击我从左到右窗格显示的条形线时，但是现在它与从上到下的默认滑动窗格混合，如何删除那些默认的bootstrap js代码。

这是代码：

HTML

 <div class="navbar navbar-default navbar-fixed-top">
      <div class="container">

        <div class="navbar-header pull-left">     
          <a class="navbar-brand" href="index.php">ddd</a>
        </div>
        <div class="navbar-header pull-right">
           <button type="button" class="navbar-toggle" 
                  data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <p class="navbar-text">
            <b> '.$username.' </b>
            <a href="logout.php" class="navbar-link">Logout</a>&nbsp;
          </p>  
        </div>

        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="about.php">About</a></li>
            <li><a href="contact.php">Contact</a></li>
          </ul>
        </div>

    </div>
  </div>

CSS

.navbar-collapse{
    position:fixed;
    overflow:hidden;
    -webkit-transform: translate(-100%, 0);
    -webkit-transition: all 1s;
    z-index: 999999;
    width:80%;
    background-color: green;

}

JS

$(document).ready(function(){
    var menu ="close";

    $('.navbar-toggle').click(function() {
        if(menu == "close") {
            $('.navbar-collapse').css('-webkit-transform', 'translate(0, 0)');
            menu= "open";
        }
        else{
            $('.navbar-collapse').css('-webkit-transform', 'translate(-100%, 0)');
            menu="close";
        }

          });
    });

Answer 1

改变这个：

vel += accel * deltaT
d += vel * deltaT

对此：

$('.navbar-collapse').css('-webkit-transform', 'translate(-100%, 0)');

重置从上到下滑动导航栏折叠

1 个答案: