如何使引导导航栏在小屏幕上从右向左平滑切换？答案

【问题标题】：How to make bootstrap navbar smoothly toggle in chrome from right to left on small screens?如何使引导导航栏在小屏幕上从右向左平滑切换？
【发布时间】：2018-02-09 00:14:00
【问题描述】：

我想从右到左切换引导导航栏而不是从上到下。我通过以下代码实现了这一点-

HTML-

<nav class="navbar navbar-inverse" role="navigation" style="height: 55px; padding-top: 2px; background-color: #000;">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#" id="a_logo_s_s">
                        <img src="images/Png - Only Logo - Variant 2.png"  class="img-responsive" id="logo_s_s" >
                    </a>
                    <a class="navbar-brand" href="#" id="a_logo_l_s">
                        <img src="images/Png - Only Text - White.png" class="img-responsive" id="logo_l_s" >
                    </a>
                </div>

                <div class="collapse navbar-collapse" id="myNavbar" style="height: 346px !important">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="active" id="l_hiw"><a href="#s3" id="hiw" class="navLink">HOW IT WORKS</a></li>
                        <li id="l_cp"><a href="#s4_1" id="cp" class="navLink">COACHES</a></li>
                        <li id="l_cp"><a href="#s5" id="au" class="navLink">ABOUT</a></li>
                    </ul>

                    <ul class="nav navbar-nav navbar-right">
                        <li id="l_el"><a href="#" id="el">ENROLL</a></li>
                        <li id="l_ma"><a href="#" id="ma" class="navLink">MANAGE ACCOUNT</a></li>
                        <li id="l_aq"><a href="#cftr" id="aq" class="navLink">CONTACT</a></li>
                    </ul>
                </div>
            </div>


</nav>

CSS-

.is_open{
    width: 240px;
}
#myNavbar{
    position: fixed;
    padding-left: 10px;
    padding-right: 0px;
    right: 0px;
    height: 100%;
}

JS-

$('[data-toggle="collapse"]').on('click',function(e) {
         e.preventDefault();

        setTimeout(function(){
            $("#myNavbar").css({
            "height":"100%",
            });
        },10);

        $("#myNavbar").toggleClass('is_open',1000);

 });

前 15-20 次点击工作正常，然后它的行为就像这样-

在第一次点击时不会发生任何事情。
在第二次点击时导航栏出现片刻然后消失，表示同时调用第一次和第二次点击。

编辑 1：我使用了css的“right”属性，css的transform属性，jQuery的“animate”函数，其中first和second在交替点击时取值0和-240px，在显示和隐藏时显示一个非常小的混蛋，这个仅在 chrome 中发生，在其他浏览器中运行良好。 Animate 遵循上述 1.、2. 的行为，它在所有浏览器中都会发生。

编辑 2：我加了

       setTimeout(function(){
            $("#myNavbar").css({
            "height":"100%",
            });
        },10);

在javascript中，因为导航栏的高度在隐藏时变为1px，因此向左滑动效果变得不可见，向左滑动效果只有在添加“setTimeout”之后才可见，没有这个它的行为就像高度没有设置为100％ . 即使我在导航栏的样式属性中硬编码了“高度：100％”，但在第一次点击后它仍然被“高度：1px”覆盖。所以为了保持高度：100％，我找到了唯一可能的方法，那就是给它赋值每次点击后。

这也可能是在显示和隐藏时出现轻微抖动的原因，因为我在 chrome 控制台中观察到高度从 1px -> 100% ->346px 变化。另外，这仅在 chrome 中发生。

【问题讨论】：

是否可以在 chrome 中从右到左平滑切换引导导航栏？如果是这样，请说明你的方式。

标签： javascript jquery css google-chrome twitter-bootstrap-3

【解决方案1】：

你可以使用jquery animate来实现更流畅的动画

$(function(){
    var c=0;
    $(".navbar-toggle").click(function(){
        $("#myNavbar").stop().animate({right:2*100 }, 'slow');
    });  
});

例子

https://codepen.io/anon/pen/MvZqwM

【讨论】：

在你的情况下，导航栏在另一次点击中返回，我也使用了 stop()，但我仍然没有得到那种效果。
我更新了codepen，告诉我是不是你需要的

【解决方案2】：

问题已解决，但存在以下缺陷-

自定义css文件添加在bootstrap css之前，使得浏览器通过bootstrap css覆盖自定义css，无论我们在html或css中定义元素的样式多少次。这也使得声明高度成为可能只有一次，因此每次点击都摆脱了 setTimeout(expandHeight,10)。
.stop()（停止功能）应该在 .animate（动画功能）之前，这样可以防止之前正在进行的动画，否则浏览器会产生故障。
.collapse 在引导程序中使用 block:none 定义，在点击后导航栏不可见（因为导航栏也有一个类“collapse”），因为自定义css 没有这样的声明。

感谢 Ovidiu Unguru

【讨论】：