https://ring-store.jp/js/2019/megamenu.js

1/*global $ */
2$(document).ready(function () {
3
4    "use strict";
5
6    $('.menu > ul > li:has( > ul)').addClass('menu-dropdown-icon');
7    //Checks if li has sub (ul) and adds class for toggle icon - just an UI
8
9
10    $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
11    //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
12
13    $(".menu > ul").before("<a href=\"#\" class=\"menu-mobile\">Navigation</a>");
14
15    //Adds menu-mobile class (for mobile toggle menu) before the normal menu
16    //Mobile menu is hidden if width is more then 959px, but normal menu is displayed
17    //Normal menu is hidden if width is below 959px, and jquery adds mobile menu
18    //Done this way so it can be used with wordpress without any trouble
19
20    $(function(){
21	$(".menu > ul > li").on("click", function() {
22				
23		if ($(this).hasClass('active')) {	
24			// activeを削除
25			$(this).removeClass('active');
26			$(this).children("ul").fadeOut(150);	
27		}
28		else {
29			// activeを追加
30			$(".menu > ul > li").removeClass('active');
31			$(".menu > ul > li").children("ul").fadeOut();		
32			$(this).addClass('active');	
33			$(this).children("ul").fadeIn(150);
34		}
35	});
36	});
37    //If width is more than 943px dropdowns are displayed on hover
38
39//If width is less or equal to 943px dropdowns are displayed on click (thanks Aman Jain from stackoverflow)
40
41    $(".menu-mobile").click(function (e) {
42        $(".menu > ul").toggleClass('show-on-mobile');
43        e.preventDefault();
44    });
45    //when clicked on mobile-menu, normal menu is shown as a list, classic rwd menu story (thanks mwl from stackoverflow)
46
47});