javascript - 如何使引导导航栏在小屏幕上从右到左顺利切换 chrome？

Question

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

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. 第一次点击没有任何反应。
2. 在第二次点击时，导航栏会出现片刻然后消失，这意味着同时调用了第一次和第二次点击。

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

编辑 2:我加了

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

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

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

Answer 1

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

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

例子

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