Question

无法显示mmenu按钮。我得到一个链接＆＃34;打开菜单＆＃34;和＆＃34;关闭菜单＆＃34;。教程中没有像这样的图标。有一篇关于此的帖子，但这没有帮助。我跟着它，得到了我上面说的结果。

这就是我所拥有的：

     <%@ 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，该代码是多余的。在他们的例子中他们仍然使用链接。所有你真正缺少的是一些CSS，使链接看起来像一个按钮。 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 - 它只是混淆了这个问题！
删除了打开和关闭的链接，并将其替换为标题上面的菜单代码。已将ID从#menu更改为#my-menu 匹配html。
从演示中复制.header a的css。这使我们的菜单链接看起来像一个按钮。实际上，它只是一个像您原来的开放和关闭链接一样的链接。
从演示中复制了.header,.footer的css。这只是给出了我们的标题栏形成了鲜明的对比，以便我们可以看到白色按钮清楚。
添加了一个简单的样式规则，使标题固定在顶部。

所以最后，它的功能部分 - HTML和Javascript几乎不需要改变。它完全是关于CSS样式表使这些链接看起来不同。

mmenu按钮不起作用

1 个答案: