gpt4 book ai didi

jquery - mmenu 按钮不起作用

转载 作者:行者123 更新时间:2023-11-27 23:49:01 27 4
gpt4 key购买 nike

无法显示 mmenu 按钮。我得到一个链接“打开菜单”和“关闭菜单”。教程中没有图标。已经有一篇关于这个的帖子,但这没有帮助。我按照它进行操作并得到了我上面所说的结果。

这是我的:

     <%@ 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>

最佳答案

那里没有任何 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 样式表有关,使这些链接看起来不同。

关于jquery - mmenu 按钮不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28287416/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com