单击链接时菜单应关闭 [英] Menu should close when click on the link

问题描述

我正在使用此菜单http://tympanus.net/Blueprints/SlidePushMenus/菜单应该在点击时关闭，当菜单关闭时按钮应该被激活。

I am using this menu http://tympanus.net/Blueprints/SlidePushMenus/ Menu should close when click on the li and button should be reactive when menu close.

<button id="showLeft">Show/Hide Left Slide Menu</button>

        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <ul>
                <li><a href="#">Celery seakale</a></li>
                <li><a href="#">Dulse daikon</a></li>
                <li><a href="#">Zucchini garlic</a></li>
                <li><a href="#">Catsear azuki bean</a></li>
                <li><a href="#">Dandelion bunya</a></li>
                <li><a href="#">Rutabaga</a></li>
    </ul>
            </nav>

JavaScript代码是

JavaScript code is

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
                    body = document.body;

                showLeft.onclick = function() {
                    classie.toggle( this, 'active' );
                    classie.toggle( menuLeft, 'cbp-spmenu-open' );

                };

推荐答案

感谢您的澄清。您可以询问产品的作者该做什么。更好的是，您应该只检查演示代码。看看中心的蓝色区域。单击一下菜单，另一个滑出。您所需要的只是检查这些元素的单击处理程序并查看它的作用。在菜单项的每个处理程序中执行第二阶段滑出。



如您所见，可以调用 classie.toggle 。在调试器下运行它，看看它在第一次和第二次点击时是如何工作的。等等...



可能你可以修改菜单代码本身，但是，很有可能，它已经为你做了。

-SA

Thank you for the clarification. You can ask the author of the product what to do. Better yet, you should simply examine the demo code. Look at the blue areas in the center. One click slides a menu in, another slides it out. All you need is to examine the click handler of those elements and see what it does. Do the second phase, sliding out, in each of the handlers of your menu items.

As you can see, there is the call to classie.toggle. Run it under the debugger and see how it works on first and second clicks. And so on…

Probably you can modify the menu code itself, but, chances are, it's already done for your.

—SA

这篇关于单击链接时菜单应关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！