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

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

更改/添加以下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;
}

在您的脚本中更改/添加以下内容：

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

Answer 2

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

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

Check the jsfiddle

Answer 3

您使用的瘦身版jQuery库不包含DOM动画功能。这就是你的代码无效的原因......

请在下面的链接中查看更多信息： https://stackoverflow.com/a/35424465/704661

编辑：

您的代码中有几个错误：

首先，您的锚点具有空的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');
        }
        });
    });

这是工作小提琴的例子

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

边栏隐藏并显示Bootstrap和Jquery？

3 个答案: