javascript - 下拉菜单停止工作

Question

我的页面左侧有 Accordion 菜单。今天我注意到访问量急剧下降，试图找出问题我发现我的菜单在 3 周前停止工作。当我单击箭头时它曾经下拉，当我单击具有子菜单的菜单时它保持打开状态并在父菜单中突出显示。现在，当我单击产品时，我的菜单不再折叠。尝试更改类并链接到最新版本的 jQuery 但没有成功。请帮我解决这个问题，或者是什么原因导致它突然停止工作？

My site with not working menu

Javascript

<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript">
( function( $ ) {
$( document ).ready(function() {
   $('#left li.menu-item-has-children').prepend('<span class="holder"></span>');
   $('#left li.menu-item-has-children > .holder').on('click', this, function(){
      var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
   });
 $('#left li.current-menu-item').addClass('open').children('ul').slideDown();
  });
})(jQuery);
</script>

CSS

.uslugi >a{
    color: #F00 !important;
    font-size:16px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
#left,
#left ul,
#left ul li,
#left ul li a {
  padding: 0;
  list-style: none;
  line-height: 1.5;
  display: block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
  color: #515151;
  margin:0;
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 16px;
}
#left ul li a:hover{
color: #000;
background-color: rgba(47, 139, 182, 0.1);
}
.widget.widget_nav_menu li:before{
    display: none;
}

#main-wrapper .widget li:hover{
    background:none;
}
#left ul ul {
  display: none;
  margin: 0 10px;
}
#left ul ul li a {
    cursor: pointer;
padding: 0 5px;
z-index: 1;
color: #344E83;
background: -moz-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.91) 98%, rgba(184,238,255,0.81) 100%);
background: -webkit-gradient(right top, left top, color-stop(0%, rgba(255,255,255,1)), color-stop(98%, rgba(255,255,255,0.91)), color-stop(100%, rgba(184,238,255,0.81)));
background: -webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.91) 98%, rgba(184,238,255,0.81) 100%);
background: -o-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.91) 98%, rgba(184,238,255,0.81) 100%);
background: -ms-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,0.91) 98%, rgba(184,238,255,0.81) 100%);
background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0.91) 98%, rgba(184,238,255,0.81) 100%);
}
#left .menu-item-has-children > a:after {
     content: "";
border-right: 10px solid transparent;
border-left: 10px solid transparent;
margin: 10px 13px 0 0;
border-top: 6px solid #5F5F5F;
position: absolute;
right: 0;
top: 0;
    }
.holder{
border: 1px solid rgba(0, 0, 0, 0.14);
padding: 11px 26px;
z-index: 8;
position: absolute;
margin: 1px -3px 0 0;
right: 0;
background: none;
    }
.holder:hover {
    background: rgba(47, 139, 182, 0.1);
}
#left ul li.open > a,
#left ul li.active > a,
#left ul ul li:hover > a,
#left ul ul li.open > a,
#left ul ul li.active > a,
.current-page-ancestor a {
color: #4686E6;
background-color: rgba(47, 139, 182, 0.2);
}
#left ul ul li:first-child > a {
  box-shadow: none;
}

#left ul ul ul li a {
  padding-left: 30px;
}
@media (min-width:768px) and (max-width:979px){
        .span3{
        width:186px;
        margin-left:0;
    }
}

Answer 1

由于 html 标记问题(脚本标记)，您的脚本无法正常工作在第 444 行附近使用 firebug > script > inline 检查:

<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript">( function( $ ) {
$( document ).ready(function() {

等等

你应该关闭脚本标签，然后打开一个新的:

<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"</script><script>( function( $ ) {
$( document ).ready(function() {
....
</script>