Modify menu to work with onclick event
<p>I am using flat theme in my wordpress website.</p>

<p>Trying to modify a menu feature...spent a lot of time in it..but no luck.</p>

<p>I am just trying to modify the menu in a way that the functionality it is providing with "ontouchstart" event I want to modify it for "onclick" event. Like when we hover the menu item, if is having sub-menu then sub menus opens up....as we hover any other item the first one closes and the sub menus of that item opens up...just like accordion effect. I like this...but I need this for "onclick" event.</p>

<p>I have modified the code for it but not able to get completely what I want.
My html is : </p>

<pre><code>&lt;div class="row row-offcanvas row-offcanvas-left"&gt;
            &lt;div class="col-lg-3" id="secondary"&gt;
                &lt;header role="banner" class="site-header" id="masthead"&gt;

                    &lt;button aria-label="Sidebar" data-toggle="offcanvas" class="btn btn-link hidden-lg toggle-sidebar" type="button"&gt;&lt;i class="fa fa-gear"&gt;&lt;/i&gt;&lt;/button&gt;
                    &lt;button aria-label="Navigation Menu" class="btn btn-link hidden-lg toggle-navigation" type="button"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/button&gt;

                    &lt;nav role="navigation" class="navigation main-navigation mCustomScrollbar" id="site-navigation"&gt;

                        &lt;ul class="nav-menu" id="menu-primary-menu"&gt;
                            &lt;li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4 current_page_item menu-item-29" id="menu-item-29"&gt;&lt;a href="http://localhost/mi6/"&gt;Introduction&lt;/a&gt;&lt;/li&gt;

                            &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31" id="menu-item-31"&gt;&lt;a href="http://localhost/mi6/index.php/planning/"&gt;Planning&lt;/a&gt;
                                &lt;i class="fa fa-caret-right open"&gt;&lt;/i&gt;&lt;ul class="sub-menu" style="display: block;"&gt;
                                    &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-34" id="menu-item-34"&gt;&lt;a href="http://localhost/mi6/index.php/planning/pm-tools-evaluation/"&gt;PM Tools Evaluation-This is addition text is added to test link wrapping on long content&lt;/a&gt;
                                        &lt;i class="fa fa-caret-right open"&gt;&lt;/i&gt;&lt;ul class="sub-menu" style="display: block;"&gt;
                                            &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35" id="menu-item-35"&gt;&lt;a href="http://localhost/mi6/index.php/planning/pm-tools-evaluation/comparative-analysis/"&gt;Comparative Analysis&lt;/a&gt;&lt;/li&gt;
                                        &lt;/ul&gt;
                                    &lt;/li&gt;

                                    &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32" id="menu-item-32"&gt;&lt;a href="http://localhost/mi6/index.php/planning/crm-tools-evaluation/"&gt;CRM tools Evaluation&lt;/a&gt;
                                        &lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;&lt;ul class="sub-menu"&gt;
                                            &lt;li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33" id="menu-item-33"&gt;&lt;a href="http://localhost/mi6/index.php/planning/crm-tools-evaluation/comparative-analysis/"&gt;Comparative Analysis&lt;/a&gt;&lt;/li&gt;
                                        &lt;/ul&gt;
                                    &lt;/li&gt;

                                &lt;/ul&gt;                               

                            &lt;/li&gt;
                        &lt;/ul&gt;

                    &lt;/nav&gt;


                &lt;/header&gt;

            &lt;div class="sidebar-offcanvas"&gt;&lt;/div&gt;

        &lt;/div&gt;



    &lt;/div&gt;
</code></pre>

<p>And Js is : </p>

<pre><code>function(a){
"use strict";
a(document).ready(function(){
        a(".toggle-sidebar").click(function(){
            a(".row-offcanvas").toggleClass("active")
        }),

        a(".toggle-navigation").click(function(){
            a(this).toggleClass("open").next("#site-navigation").slideToggle(300)
        }),

        a("#site-navigation .sub-menu, #site-navigation .children").before('&lt;i class="fa fa-caret-right"&gt;&lt;/i&gt;'),
        "onclick"in window?a("#site-navigation .menu-item-has-children .fa, #site-navigation .page_item_has_children .fa").click(function(){
            a(this).toggleClass("open").next("ul").slideToggle(300)
        }):

        a("#site-navigation .menu-item-has-children, #site-navigation .page_item_has_children").not(".current-menu-parent, .current_page_parent, .current_page_ancestor, .current-menu-ancestor").hover(function(){
            a(this).children(".fa").toggleClass("open").next("ul").stop(!0,!0).delay(200).slideDown()
        },
        function(){
            a(this).children(".fa").toggleClass("open").next("ul").stop(!0,!0).delay(500).slideUp()
        }
    )}
    )}
(jQuery);
</code></pre>

<p>From the above code, menus are opening up with "onclick" but when we click on another li which is having sub-menu then the it opens up but the previous li is not closing like this fiddle : <a href="http://jsfiddle.net/6augy27b/14/" rel="nofollow">http://jsfiddle.net/6augy27b/14/</a></p>

<p>I want this should work as accordion like when I click on one sub-menu it will open its children but when I click on another sub-menu the children of that menu should be open and other sub-menu will close.</p>