使用 Bootstrap 和 Jquery 隐藏和显示侧边栏？

Question

伙计们，我想使用 bootstrap 创建一个隐藏和显示的侧边栏，但我的代码不起作用..

请帮帮我...

我的代码 HTML 是：

<nav role="nav" class="navbar">
    <a href="" class="menu">button</a>
</nav>

<nav role="nav" class="sidebar">
    sidebar menu
</nav>

<main role="main" class="main-page">
    main content
</main>

这是我的 CSS 代码：

.menu {
    display: block !important;
}

.sidebar {
    color: #fff;
    width: 240px;
    height: 100%;
    position: fixed;
    background: #2a3542;
}

.main-page {
    color: #000;
    margin-left: 240px;
    position :relative;
}

这是我的 jquery 代码：

<script>
    $(function () {
        $('.menu').on('click', function () {
            if ($('.sidebar').is(':visible')) {
                $('.sidebar').animate({'width': '0px'}, 'slow', function () {
                    $('.sidebar').hide();
                });
                $('.main-page').animate({'padding-left': '0px'}, 'slow');
            } else {
                $('.sidebar').show();
                $('.sidebar').animate({'width': '240px'}, 'slow');
                $('.main-page').animate({'padding-left': '240px'}, 'slow');
            }
        });
    });
</script>

我正在使用 bootstrp CDN：jquery-3.2.1.slim.min.js / popper.min.js / bootstrap.min.js

Answer 1

尽量不要使用jquery.slim。它与 min.js

相得益彰

https://code.jquery.com/jquery-3.2.1.min.js

Check the jsfiddle

Answer 2

您正在使用 jQuery 库的精简版，它不包含 DOM 动画功能。这就是您的代码无法正常工作的原因...

在下面查看有关此 link 的更多信息：

编辑：

您的代码中有几个错误：

首先是您的锚点的 href 属性为空，这会导致每次点击时重新加载页面。

其次，您在主要内容上有边距和填充，这导致侧边栏和内容之间存在多个间隙。

HTML

<nav role="nav" class="navbar">
    <a href="#" class="menu">button</a>
</nav>

<nav role="nav" class="sidebar">
    sidebar menu
</nav>

<main role="main" class="main-page">
    main content
</main>

CSS

.menu {
                display: block !important;
            }

            .sidebar {
                color: #fff;
                width: 240px;
                height: 100%;
                position: fixed;
                background: #2a3542;
            }

            .main-page {
                color: #000;
                padding-left: 240px;
                position :relative;
            }

Javascript

$(function () {
        $('.menu').on('click', function () {
        if ($('.sidebar').is(':visible')) {
            $('.sidebar').animate({'width': '0px'}, 'slow', function () {
                $('.sidebar').hide();
            });
            $('.main-page').animate({'padding-left': '0px'}, 'slow');
        } else {
            $('.sidebar').show();
            $('.sidebar').animate({'width': '240px'}, 'slow');
            $('.main-page').animate({'padding-left': '240px'}, 'slow');
        }
        });
    });

这里是工作fiddle例子

https://codepen.io/mnikolaus/pen/mqByqK

Answer 3

我不确定为什么不起作用。试试这个。

Change/Add以下CSS:

.sidebar {
    color: #fff;
    width: 240px;
    height: 100%;
    position: fixed;
    background: #2a3542;
    left:0px;
    transition:0.3s all ease-in-out;
}

.sidebar.close {
    left: -240px;
    transition:0.3s all ease-in-out;
}

在您的脚本中 Change/Add 以下内容：

$('.menu').on('click', function () {
  $('.sidebar').toggleClass('close');
});

使用 Bootstrap 和 Jquery 隐藏和显示侧边栏？

Sidebar hide and show with Bootstrap and Jquery?

javascript

css

jquery

sidebar

twitter-bootstrap