Question

我已经实施了Blueprint Sidebar Menu，DEMO的侧边栏菜单。默认情况下，单击文档时菜单不会隐藏。为了在外面点击时隐藏菜单，我写道： var showRightPush = document.getElementById（＆＃39; showRightPush＆＃39;）， menuRight = document.getElementById（＆＃39; cbp-spmenu-s2＆＃39;）， body = document.body;

    showRightPush.onclick = function(e) {
        e.preventDefault();
        classie.toggle( this, 'active' );
        classie.toggle( body, 'cbp-spmenu-push-toleft' );
        classie.toggle( menuRight, 'cbp-spmenu-open' );
        //disableOther( 'showRightPush' );
    };
$(document).click(function(){
            if($(showRightPush).is(':visible')){
                $(menuRight).slideUp(4300);
            }
        });

我的HTML是：

 <li class="">
                    <a href="#" class="show-right-button" id= "showRightPush"><i class="fa fa-bars"></i></a>
                </li>

<nav class="sidebar-menu cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
    <h3 style="padding:12px 0; opacity:0.4">&nbsp;</h3>

    <div class="sidebar-nav">
        <h3></h3>
        <a href="#"><i class="fa fa-home"></i>Home</a>
        <a href="#"><i class="fa fa-info"></i>About Us</a>
        <a href="#"><i class="fa fa-envelope"></i>Team</a>
    </div>

</nav>

但是点击“显示菜单”按钮时菜单会自动隐藏（时间会增加以检查）。我认为这是因为按钮本身就在文档中。那么如何防止这种情况呢？

Answer 1

我为我做了这件事并且有效。只需更改一下代码，即可启动并运行。

var menuRight = document.getElementById('cbp-spmenu-s2');
var showRight = document.getElementById('showRight');
var body = document.body;
var menuOpen = false;

showRight.onclick = function() {
    classie.toggle(menuRight, 'cbp-spmenu-open');
    setInterval(function() {menuOpen = true;}, 100);
    menuOpen = false;
};

body.onclick = function() {
    if (menuOpen) {
        classie.removeClass(menuRight, 'cbp-spmenu-open');
       menuOpen = false;
    }
};

单击“蓝图幻灯片”和“推送菜单”文档无法正常工作时，侧边栏菜单隐藏

1 个答案: