mmenu 按钮不起作用

Question

无法显示 mmenu 按钮。我得到 link "Open the menu" 和 "Close the menu"。教程中没有图标。已经有关于此的 post，但这没有帮助。我跟着它并得到了我上面所说的结果。

这是我的：

     <%@ Page Language="vb" AutoEventWireup="false"         CodeBehind="Default.aspx.vb" Inherits="WebApplication1.WebForm1" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>          
        <script type="text/javascript" src="/src/js/jquery.mmenu.min.all.js"></script>
        <link type="text/css" rel="stylesheet" href="/src/css/jquery.mmenu.all.css" />  


        <script type="text/javascript">
            $(document).ready(function () {
                $("#my-menu").mmenu({
                "counters": true, "classes": "mm-light"       
                });

                });
          </script>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#my-menu").mmenu();
               $("#my-button").click(function () {
                $("#my-menu").trigger("open.mm");
            });
        });
</script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#my-menu").mmenu();
            $("#my-button").click(function () {
                $("#my-menu").trigger("close.mm");
            });
        });
</script>

    </head>
    <body>

        <a href="#my-menu">Open the menu</a>
        <a href="#my-menu">Close the menu</a>


        <div id="page">     
            <!-- The menu -->
      <nav id="my-menu">
         <ul>
            <li "><a href="/">Home</a></li>
            <li "><a href="/about">About us</a>
               <ul>
                  <li><a href="/about/history">History</a></li>
                  <li><a href="/about/team">The team</a></li>
                  <li><a href="/about/address">Our address</a></li>
               </ul>
            </li>
            <li><a href="/contact">Contact</a></li>
         </ul>
      </nav>
        </div>
    </body>
</html>

Answer 1

那里没有任何 html 可以创建按钮。本教程将向您介绍如何设置 Javascript 以在单击操作时触发菜单 - 您的代码中包含：

    $("#my-button").click(function () {
        $("#my-menu").trigger("close.mm");
    });

但由于没有元素#my-button，该代码是多余的。在他们的示例中，他们无论如何都使用 links。您真正缺少的只是一些 CSS 使 link 看起来像一个按钮。 mmenu 下载中有一个示例。这是该示例中的相关 html：

    <div class="header FixedTop">
        <a href="#menu"></a>
        Demo
    </div>

并且 css 在 .header a

下的 demo.css

不过，任何 css 的合适按钮都可以解决问题。

Here is a fiddle 根据您的代码，使用工作按钮。希望以一种更容易看到发生了什么的方式拆分 html、css 和 javascript。

这些是我为使按钮正常工作所做的更改：

删除了一些我们不需要的 javascript - 这只是混淆问题！
删除了打开和关闭 links，并将它们替换为 header 上面的菜单代码。将 id 从 #menu 更改为 #my-menu 到匹配 html.
从演示中复制到 .header a 的 css。这就是使我们的菜单 link 看起来像一个按钮的原因。实际上，它只是一个 link 就像你原来的打开和关闭 links.
从演示中为 .header,.footer 复制了 css。这只是给我们的 header 栏有一个很好的对比，这样我们就可以看到白色按钮清楚。
添加了一个简单的样式规则，使 header 固定在顶部。

所以最后，它的功能部分 - HTML 和 Javascript 几乎不需要改变。 CSS 样式表使那些 link 看起来不同。

mmenu 按钮不起作用

mmenu button not working

jquery

html

mmenu