移动导航上的jQuery单击功能不起作用

Question

我在网站上使用了3 daisynav脚本，并花了数小时试图弄清单击功能为何不起作用，它可以在他们拥有的演示站点上正常工作。 我正在使用WordPress并且正在使用enque脚本，但我尝试加载页眉和页脚却无济于事。 如果有人可以看看并帮助我解决这个问题，我将不胜感激。 http://www.jamimariedesign.com/NewSite/

 /*! DaisyNav v1.0.0 | (c) 2013 CircleWaves (support@circlewaves.com) */ (function(a,f,g,h){a.extend({daisyNav:function(){a("ul.menu-list li.has-submenu>a").append('<span class="menu-expand"></span>');a(".menu-toggle-button").click(function(){if(a(this).data("menu-id"))for(var b=a(this).data("menu-id").split(" "),e=b.length,c=0;c<e;c++){var d=b[c];d&&a("#"+d).toggleClass("show-for-devices")}else a("ul.menu-list").toggleClass("show-for-devices");a(this).toggleClass("active")});a(".menu-list .menu-expand").click(function(b){b.preventDefault();a(this).parent().next("ul").toggleClass("show-for-devices")})}})})(jQuery, window,document); 

 /* Menu Styles */ /* Init Logic */ .menu-toggle-button { padding: 1em; border: 1px solid #000; cursor: pointer; } .menu-toggle-button { display: none; } .menu-toggle-button.active { border: 1px solid #777; color: #777; } ul.menu-list { list-style: none; position: relative; display: block; padding: 0px; margin: 0px; height: 100%; float: left; } ul.menu-list li { display: inline-block; position: relative; } ul.menu-list li a { display: inline-block; } ul.menu-list li a { display: block; } /* Handling Submenu */ ul.menu-list ul { display: none; padding: 0px; margin: 0px; position: absolute; top: 100%; left: 0%; list-style: none; z-index: 700 } ul.menu-list ul li { position: relative; float: none; padding: 0px; margin: 0px; } ul.menu-list ul ul { position: absolute; top: 0%; left: 100%; z-index: 700 } ul.menu-list li:hover>ul { display: inline-block; } /* End Init Logic */ /* Style */ ul.menu-list li:hover>ul { background: #fff!ie; } /* Fix for IE7 */ /* Submenu Expand Icon */ ul.menu-list li.has-submenu>a>span.menu-expand { font-size: 0.6em; float: right; padding-left: 10px; line-height: 2.2em; } /* All levels */ ul.menu-list li.has-submenu>a>span.menu-expand { float: none\\9; } /* Fix for IE9 and below */ ul.menu-list>li.has-submenu>a>span.menu-expand { } /* Level 1 */ ul.menu-list>li.has-submenu>a>span.menu-expand:after { content: '\\25BC' } /* Level 1 */ ul.menu-list li li.has-submenu>a>span.menu-expand { } /* Level 2 */ ul.menu-list li li.has-submenu>a>span.menu-expand:after { content: '\\25BA' } /* Level 2 */ /* You can manage with of elements by width of a-tag */ ul.menu-list li a { color: #686868; text-decoration: none; padding: 5px; } /* All levels */ ul.menu-list li>a { } /* Level 1 */ ul.menu-list li li>a { width: 150px; } /* Level 2 */ ul.menu-list li li li>a { } /* Level 3 */ /* First Level*/ ul.menu-list>li { margin: 0px 10px 0px 0px; border: none; font-family: Lato; font-size: 1rem; display: block; position: relative; float: left; left: 50%; } ul.menu-list>li>a { } ul.menu-list>li:hover { background: none } ul.menu-list>li:hover>a { color: #aeaeae; } ul.menu-list>li>a:hover { } /* End First Level*/ /* Second Level*/ ul.menu-list>li>ul { border: 1px solid #eee; } ul.menu-list>li>ul>li { background: #f7f7f7; } ul.menu-list>li>ul>li>a { } ul.menu-list>li>ul>li:hover { background: #ddd; } ul.menu-list>li>ul>li:hover>a { } ul.menu-list>li>ul>li>a:hover { } /* End Second Level*/ /* Third Level*/ ul.menu-list>li>ul>li>ul { border: 1px solid #777; } ul.menu-list>li>ul>li>ul>li { background: #e7e7e7; } ul.menu-list>li>ul>li>ul>li>a { } ul.menu-list>li>ul>li>ul>li:hover { background: #ddd; } ul.menu-list>li>ul>li>ul>li:hover>a { } ul.menu-list>li>ul>li>ul>li>a:hover { } /* End Third Level*/ /* End Style */ /* End Menu Styles */ /* RESPONSIVE MEDIA QUERIES */ @media screen and (max-width: 768px) { /* Menu Styles */ /* Init Logic */ .menu-toggle-button { display:block; } .show-for-devices { display: block!important; } ul.menu-list { display: none; } ul.menu-list li { clear: both; float: none; } /* Handling Submenu */ ul.menu-list ul { display: none; position: relative; } ul.menu-list ul li { } ul.menu-list ul ul { position: relative; top: 100%; left: 0%; } ul.menu-list li:hover>ul { display: none; } /* End Init Logic */ /* Style */ ul.menu-list li:hover>ul { background: #fff!ie; } /* Fix for IE7 */ /* Submenu Expand Icon */ ul.menu-list li.has-submenu>a>span.menu-expand { font-size: 0.6em; padding: 0.8em; line-height: 1em; position: absolute; right: 0; z-index: 700 } /* All levels */ ul.menu-list>li.has-submenu>a>span.menu-expand { } /* Level 1 */ ul.menu-list li li.has-submenu>a>span.menu-expand { } /* Level 2 */ ul.menu-list li li.has-submenu>a>span.menu-expand:after { content: '\\25BC'; } /* Level 2 */ /* You can manage with of elements by width of a-tag */ ul.menu-list li a { color: #333; position: relative } /* All levels */ ul.menu-list li>a { } /* Level 1 */ ul.menu-list li li>a { width: auto; } /* Level 2 */ ul.menu-list li li li>a { } /* Level 3 */ /* First Level*/ ul.menu-list>li { margin: 0px; border: none; border-bottom: 1px solid #000; } ul.menu-list>li>a { } ul.menu-list>li:hover { background: #000 } ul.menu-list>li:hover>a { color: #fff; } ul.menu-list>li>a:hover { } /* End First Level*/ /* Second Level*/ ul.menu-list>li>ul { border: none; } ul.menu-list>li>ul>li { padding-left: 5px; } ul.menu-list>li>ul>li>a { } ul.menu-list>li>ul>li:hover { background: #ddd; } ul.menu-list>li>ul>li:hover>a { } ul.menu-list>li>ul>li>a:hover { } /* End Second Level*/ /* Third Level*/ ul.menu-list>li>ul>li>ul { border: none; } ul.menu-list>li>ul>li>ul>li { padding-left: 5px; } ul.menu-list>li>ul>li>ul>li>a { } ul.menu-list>li>ul>li>ul>li:hover { background: #ddd; } ul.menu-list>li>ul>li>ul>li:hover>a { } ul.menu-list>li>ul>li>ul>li>a:hover { } /* End Third Level*/ /* End Style */ /* End Menu Styles */ } 

 <!-- Toggle button for menu, you can place it anywhere --> <div class="menu-toggle-button" data-menu-id="menu-id-1">≡</div> <!-- Menu Structure --> <ul class="menu-list" id="menu-id-1"> <li><a href="#">home</a></li> <li><a href="#">weddings</a></li> <li><a href="#">portraits</a></li> <li class="has-submenu"> <a href="#">info</a> <ul class="sub-menu"> <li><a href="#">investment</a></li> <li><a href="#">kind words</a></li> <li><a href="#">about me</a></li> <li><a href="#">bucket list</a></li> </ul> </li> <li><a href="#">blog</a></li> <li><a href="#">contact</a></li> </ul> 

Answer 1

请对移动版本使用vclick事件。 像这样：

    $( document ).on( "vclick", ".menu-toggle-button", function() {
      Your code here:
      });