https://fun-japan.jp/assets/js/main/custom-dropdown.js

1"use strict";
2
3// Header menu
4function headerDropDownInit() {
5    $('#notifications .dropdown-toggle, .user-dropdown .dropdown-toggle').on('click', function (e) {
6      e.preventDefault();
7      $(this).parent().toggleClass("open");
8    });
9  
10    $('body').on('click touchstart', function (e) {
11        if (!$('#notifications').is(e.target) && $('#notifications').has(e.target).length === 0 && $('#notifications.open').has(e.target).length === 0) {
12            $('#notifications').removeClass('open');
13        }
14        if (!$('.user-dropdown').is(e.target) && $('.user-dropdown').has(e.target).length === 0 && $('.user-dropdown.open').has(e.target).length === 0) {
15            $('.user-dropdown').removeClass('open');
16        }
17    });
18  
19    $('#closeNotifications').on('click touchstart', function (e) {
20      e.preventDefault();
21      $('#notifications').removeClass('open');
22    });
23}
24
25// Select box
26function DropDown(el) {
27    this.dd = el;
28    this.placeholder = this.dd.children('span');
29    this.opts = this.dd.find('ul.dropdown > li');
30    this.val = '';
31    this.index = -1;
32    this.initEvents();
33}
34
35DropDown.prototype = {
36    initEvents : function() {
37        var obj = this;
38
39        obj.dd.on('click', function(event){
40            $(this).toggleClass('active');
41            return false;
42        });
43
44        obj.opts.on('click',function(){
45            var opt = $(this);
46            obj.val = opt.text();
47            obj.index = opt.index();
48            obj.placeholder.text(obj.val);
49        });
50    },
51    getValue : function() {
52        return this.val;
53    },
54    getIndex : function() {
55        return this.index;
56    }
57}
58
59function selectBoxDropdownInit() {
60    $('.wrapper-dropdown').each(function() {
61        new DropDown( $(this) );
62    });    
63
64    $(document).click(function() {
65        // all dropdowns
66        $('.wrapper-dropdown').removeClass('active');
67    });
68}
69
70$(function() {
71  headerDropDownInit();
72  selectBoxDropdownInit();
73
74  $('.header__search .fa-search').on('click', function(e) {
75    $('.header__search').addClass('js-search-full');
76  });
77
78  $('.header__search').on('click', function(e) {
79    e.stopPropagation();
80  });
81
82  $(document).on('click', function(e) {
83    if ($(this).hasClass('header__search')) {
84    return ;
85    }
86
87    $('.header__search').removeClass('js-search-full');
88  });
89
90  $(document).ready( function () {
91    $('.fa-search').click(function( e ){
92      $('.header__search .wrapper-dropdown').removeClass('active');
93    });
94  });
95});