Question

我想从右到左切换bootstrap navabar而不是从上到下切换。我使用以下代码实现了这一点 -

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次点击时工作正常，然后它就像这样 -

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

编辑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％”，但仍然在第一次点击后用“height：1px”覆盖。为了保持高度：100％，我发现只有可能的方式，那就是为它赋值每次点击后。

这也可能是因为显示和隐藏时出现轻微的混乱因为1px - >我在Chrome控制台中观察到的100％ - > 346px。此外，这只发生在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

Answer 2

问题已经解决，它有像 -

这样的缺陷

在bootstrap css之前添加了自定义css文件，这使得浏览器通过bootstrap css覆盖自定义css，无论我们在html或css中定义元素的样式多少次。这也可以声明高度只有一次，因此每次点击都会摆脱setTimeout（expandHeight，10）。
.stop（）（停止功能）应该在.animate（动画功能）之前存在，以便它可以阻止以前正在进行的动画，否则浏览器会产生毛刺。
< / LI>
.collapse 在bootstrap中使用 block：none 定义，导致navbar不可见（因为导航栏也有一个类“崩溃”）点击后自定义css没有这样的声明。

感谢Ovidiu Unguru

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

2 个答案: