javascript - 使用 sidebar.js/jQuery 将不透明层添加到 HTML 部分

Question

我正在使用 Sidebar.js并希望在侧边栏显示时向主容器部分添加 CSS opacity 设置。 (类似于 hypebeast.com，当您单击三栏图标时)。

我不确定是否要添加覆盖 div 然后用 jQuery 隐藏/显示它，或者是否可以将函数添加到边栏 js 来执行此操作(这似乎是可行的方法)。

我想用 CSS 控制不透明度，但如果它在 js 中，那也很好。

欢迎任何帮助。

我的 html:

<div class="wrapper jsc-sidebar-content jsc-sidebar-pulled">
    <nav>
        <a href="#" class="fa fa-bars jsc-sidebar-trigger"></a>
    </nav>
    <section>
        <!--content with opacity on clicking above nav-->           
    </section>
</div>
<nav class="sidebar jsc-sidebar" id="jsi-nav">
    <!-- nav bar content -->
</nav>  

侧边栏js和jquery

<script src="js/lib/jquery.min.js"></script>
<script src="js/sidebar.js"></script>
<script>
        $('#jsi-nav').sidebar({
            trigger: '.jsc-sidebar-trigger',
            scrollbarDisplay: true,
            pullCb: function () { console.log('pull'); },
            pushCb: function () { console.log('push'); }
        });

        $('#api-pull').on('click', function (e) {
            e.preventDefault();
            $('#jsi-nav').data('sidebar').push();
        });
        $('#api-push').on('click', function (e) {
            e.preventDefault();
            $('#jsi-nav').data('sidebar').pull();
        });

    </script>

Answer 1

演示 - http://jsfiddle.net/victor_007/79sb2rq9/

为包装器添加和删除类并使用伪添加覆盖

.wrapper.overlay {
    position:relative;
}
.wrapper.overlay:before {
    content:'';
    background:black;
    opacity:.5;
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index:1;
}