Question

我从这个页面修改了菜单动画代码...

https://codepen.io/designcouch/pen/Atyop

...然后按下按钮打开并关闭我的菜单（点击它，它应显示和隐藏#mainmenu ...通过打开和关闭班级.menuview）。但是，它不起作用。不知道发生了什么......需要一些帮助。我已经绞尽脑汁待了一段时间......

我的代码如下......

JAVASCRIPT 即可。我没有看到任何错误...

// Menu Button        
$(document).ready(function(){
    $('#nav-icon3').click(function(){
        $('#mainmenu').toggleClass('menuview');
        $(this).toggleClass('open');
    });
});

HTML （我正在使用WordPress显示菜单）

<div id="mainmenu">
<?php wp_nav_menu( array( 'theme_location' => 'main-navigation', 'container' => '', 'items_wrap' => '<ul id="menu" class="%2$s">%3$s</ul>' ) ); ?>
</div>   

<div id="nav-icon3">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

STYLES （这是样式表的响应部分。http://www.silkvodka.com/wp-content/themes/silkvodka/style.css处的完整样式表）

    #mainmenu { position: absolute; top: -59999px; left: -59999px; /* Hide Menu */}
#mainmenu.menuview { position:absolute; top:60px; left:10px; display:block; float:none; width:146px; z-index:99; }

#nav-icon3 { display:block;
  width: 60px;
  height: 60px;
  float:none;
  position: absolute;
  top:0; left:200px;
  background-color:#494949;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

#nav-icon3 span {
  display: block;
  position: absolute;
  height: 3px;
  width: 40px;
  margin:0 10px;
  background: #FFF;
  border-radius: 1px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 17px; }
#nav-icon3 span:nth-child(2), 
#nav-icon3 span:nth-child(3) { top: 30px; }
#nav-icon3 span:nth-child(4) { top: 43px; }

#nav-icon3.open span:nth-child(1) { top: 14px; width: 0%; left: 50%;}
#nav-icon3.open span:nth-child(2) { 
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#nav-icon3.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#nav-icon3.open span:nth-child(4) { top: 14px; width: 0%; left: 50%; }

您可以在此处查看整个页面：http://www.silkvodka.com/cocktails/（使用小型浏览器窗口，否则，响应按钮将不可见）

Answer 1

您在jquery之前加载了javascript.js文件。您的javascript.js文件尝试使用jquery ...将这些脚本标记切换为：

<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.silkvodka.com/wp-content/themes/silkvodka/js/javascript.js"></script>

控制台错误“未捕获的ReferenceError：$未定义”表明您正在尝试使用jquery，这是明显的。

Answer 2

使用wordpress时，请使用jQuery而不是$

jQuery(document).ready(function(){
    jQuery('#nav-icon3').click(function(){
        jQuery('#mainmenu').toggleClass('menuview');
        jQuery(this).toggleClass('open');
    });
});

应该运行：）

jQuery函数不起作用

2 个答案: