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

Posted 2023-02-23

【中文标题】单击蓝图幻灯片和推送菜单的文档时侧边栏菜单隐藏，无法正常工作

【英文标题】：sidebar menu hide when click document for Blueprint Slide and Push Menus not working properly

【发布时间】：2015-06-30 07:33:35

【问题描述】：

我已经实现了来自Blueprint Sidebar Menu、DEMO 的侧边栏菜单。默认情况下，当我们单击文档时菜单不会隐藏。为了使菜单在外部单击时隐藏，我写道： var showRightPush = document.getElementById('showRightPush'), menuRight = document.getElementById('cbp-spmenu-s2'), 正文 = 文档.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>

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

【问题讨论】：

您能添加您的HTML 标记和您遇到的问题的演示吗？

请看我更新的问题:)

您可以在JsFiddle 中添加一个有效的snippet 或demo 来解决您当前的问题吗？我似乎无法让它工作，即使只是让它向右推

【参考方案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;
    
;