KwS KwS - 3 months ago 24
jQuery Question

Dropdown menu stopped working

I have accordion menu on the left at my page. Today I noticed drastically decreasing visits, trying to find problem i found that my menu has stopped working 3 weeks ago. It used to drop down when i clicked on arrow, and when i click on menu that has sub-menu it remains open with highlight at parent menu. Now when i click products, my menu dont collapsing anymore. Tried to change classes and linking to newest version of jQuery but not worked.
Please help me with that, or what cause it to suddenly stopped working?

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

Your script is not working due to html markup problems (script tag) Check it out with firebug > script > inline at around line 444:

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

etc.

You should close the script tag, then open a new one:

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

Comments